html5背景,html5背景图片透明度

html5如何把一个图片设为页面的全屏背景？

//HTML - From qifeiye.com

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了太和免费建站欢迎大家使用！

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当然宽高是一定要有，然后在div中去设置要的背景图片，是否重复等属性，repaet这个来设置，no-repeat(是不重复)、repeat-x（沿着x轴重复）、repeat-y（沿着Y轴重复）这里我提交一段代码：

div id = 'test'/div

style

#test{

width：300px;

height:400px;

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

}

/style

这样背景图片就设置好了！

html5中怎么把视频弄成背景

大概原理就是将视频的堆叠顺序即z-index设置小一点，可以设置为负值，然后将视频position设为fixed，宽高都设为100%即可，大概代码如下：

video{

position: fixed;

right: 0px;

bottom: 0px;

min-width: 100%;

min-height: 100%;

height: auto;

width: auto;

/*加滤镜*/

/*filter: blur(15px); //背景模糊设置 */

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

/*filter:grayscale(100%); //背景灰度设置*/

z-index:-11

}

html5怎么设置整页背景图片

html5中设置整页背景图片的方法是利用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怎么把视频设置成背景

第一步：准备工作

先准备好一个视频

第二步：引入视频

这里我们需要用到了video/标签，然后在source里面写视频的路径，autoplay用来使其自动播放，muted用来使其静音，loop为循环播放

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

/video

第三步：调节视频，使其适应屏幕

以上的步骤还不能满足我们的需求，这个时候我们会发现有滚动条，而且视频会遮挡我们要显示的内容，可这远远不是我们想要的结果啊，不怕，有我呢

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

这样就OK了，-webkit-filter:grayscale(100%)为调节会色调的，同样适用于img

第四步：视频播放速度

可以利用video的playbackRate属性来控制video的播放速度，如果要让背景视频以慢速播放的话可以加上下面的javascript

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