正文
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");
});
相关问答
Q1: HTML 5 关于设置背景图片的问题
是不是相对路径的问题，现在截图的HTML 是不是 那个 网页半透明.html 是的话，直接写 JPG 图片的名字就可以了
Q2: 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
这样背景图片就设置好了！
Q3: html5手机页面背景图片自适应大小问题
1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。
2、输入width：100％；height：100％；min－width：1000px；这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。
3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。
4、输入background－position：center0；使图片的位置，居中，靠左对齐。
