html5如何把一個圖片設(shè)為頁面的全屏背景？

//HTML?-?From?qifeiye.com

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了太和免費建站歡迎大家使用！

img?src="images/bg.jpg"?id="bg"?alt=""

//CSS

#bg?{

position:?fixed;?

top:?0;?

left:?0;?

/*?Preserve?aspet?ratio?*/

min-width:?100%;

min-height:?100%;

}

或者

img.bg?{

/*?Set?rules?to?fill?background?*/

min-height:?100%;

min-width:?1024px;

/*?Set?up?proportionate?scaling?*/

width:?100%;

height:?auto;

/*?Set?up?positioning?*/

position:?fixed;

top:?0;

left:?0;

}

@media?screen?and?(max-width:?1024px)?{?/*?Specific?to?this?particular?image?*/

img.bg?{

left:?50%;

margin-left:?-512px;???/*?50%?*/

}

}

或者

//HTML?-?From?qifeiye.com

img?src="images/bg.jpg"?id="bg"?alt=""

/CSS

#bg?{?position:?fixed;?top:?0;?left:?0;?}

.bgwidth?{?width:?100%;?}

.bgheight?{?height:?100%;?}

//jQuery

$(window).load(function()?{????

var?theWindow????????=?$(window),

$bg??????????????=?$("#bg"),

aspectRatio??????=?$bg.width()?/?$bg.height();

function?resizeBg()?{

if?(?(theWindow.width()?/?theWindow.height())??aspectRatio?)?{

$bg

.removeClass()

.addClass('bgheight');

}?else?{

$bg

.removeClass()

.addClass('bgwidth');

}

}

theWindow.resize(resizeBg).trigger("resize");

});

html5教程 如何加背景圖片

html5加背景圖片可以通過：

1.首先可以去寫一個div，然后這個div當(dāng)然寬高是一定要有，然后在div中去設(shè)置要的背景圖片，是否重復(fù)等屬性，repaet這個來設(shè)置，no-repeat(是不重復(fù))、repeat-x（沿著x軸重復(fù)）、repeat-y（沿著Y軸重復(fù)）這里我提交一段代碼：

div id = 'test'/div

style

#test{

width：300px;

height:400px;

background:url('圖片的地址')no-repeat;

}

/style

這樣背景圖片就設(shè)置好了！

html5中怎么把視頻弄成背景

大概原理就是將視頻的堆疊順序即z-index設(shè)置小一點，可以設(shè)置為負(fù)值，然后將視頻position設(shè)為fixed，寬高都設(shè)為100%即可，大概代碼如下：

video{

position: fixed;

right: 0px;

bottom: 0px;

min-width: 100%;

min-height: 100%;

height: auto;

width: auto;

/*加濾鏡*/

/*filter: blur(15px); //背景模糊設(shè)置 */

/*-webkit-filter: grayscale(100%);*/

/*filter:grayscale(100%); //背景灰度設(shè)置*/

z-index:-11

}

html5怎么設(shè)置整頁背景圖片

html5中設(shè)置整頁背景圖片的方法是利用css3樣式：

寫法如下：

img.bg {

/* Set rules to fill background */

min-height: 100%;

min-width: 1024px;

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

img.bg {

left: 50%;

margin-left: -512px; ? /* 50% */

}

}

效果如：

html5怎么把視頻設(shè)置成背景

第一步：準(zhǔn)備工作

先準(zhǔn)備好一個視頻

第二步：引入視頻

這里我們需要用到了video/標(biāo)簽，然后在source里面寫視頻的路徑，autoplay用來使其自動播放，muted用來使其靜音，loop為循環(huán)播放

video id="v1" autoplay muted loop style="width: 100%"????source? src="mp4/loading.mp4"

/video

第三步：調(diào)節(jié)視頻，使其適應(yīng)屏幕

以上的步驟還不能滿足我們的需求，這個時候我們會發(fā)現(xiàn)有滾動條，而且視頻會遮擋我們要顯示的內(nèi)容，可這遠遠不是我們想要的結(jié)果啊，不怕，有我呢

video{??????????position: fixed;??????????right:0;??????????bottom: 0;??????????min-width: 100%;??????????min-height: 100%;??????????width: auto;??????????height: auto;??????????z-index: -9999;??????????/*灰色調(diào)*/??????????/*-webkit-filter:grayscale(100%)*/??????}

這樣就OK了，-webkit-filter:grayscale(100%)為調(diào)節(jié)會色調(diào)的，同樣適用于img

第四步：視頻播放速度

可以利用video的playbackRate屬性來控制video的播放速度，如果要讓背景視頻以慢速播放的話可以加上下面的javascript

script????var video= document.getElementById('v1');????video.playbackRate = 0.5;/script

分享標(biāo)題：html5背景,html5背景圖片透明度
路徑分享：http://chinadenli.net/article21/dseegcd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)站維護、標(biāo)簽優(yōu)化、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)