html5全屏图片,html5怎么把图片设置成全屏背景
html5怎么设置整页背景图片
html5中设置整页背景图片的方法是利用css3样式：
创新互联建站-专业网站定制、快速模板网站建设、高性价比阳明网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式阳明网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖阳明地区。费用合理售后完善，十多年实体公司更值得信赖。
写法如下：
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% */
}
}
效果如：
[img]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，用div+css做页面怎么能铺满全屏
把图片的最左边或者竖着切一两个像素 在浏览器里面横铺 在把图片放在中间居中 那样看上去就是平铺效果 这种方法只限于有规律的图片
本文标题：html5全屏图片,html5怎么把图片设置成全屏背景
分享路径：http://ybzwz.com/article/dsopiih.html
