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

//HTML?-?From?qifeiye.com

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

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.首先可以去寫一個(gè)div，然后這個(gè)div當(dāng)然寬高是一定要有，然后在div中去設(shè)置要的背景圖片，是否重復(fù)等屬性，repaet這個(gè)來設(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è)置小一點(diǎn)，可以設(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)備好一個(gè)視頻

第二步：引入視頻

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

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

/video

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

以上的步驟還不能滿足我們的需求，這個(gè)時(shí)候我們會(huì)發(fā)現(xiàn)有滾動(dòng)條，而且視頻會(huì)遮擋我們要顯示的內(nèi)容，可這遠(yuǎn)遠(yuǎn)不是我們想要的結(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é)會(huì)色調(diào)的，同樣適用于img

第四步：視頻播放速度

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

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