我试图使用css将背景照片添加到网站的一部分。我想将照片设置为“封面”以拉伸并调整其大小,因为来自访问者的浏览器允许它。
问题是,我想将网站拆分为两部分,#top和#bottom。而上半部分约为79%,底部部分为21%。#top部分将包含“封面”照片,而下半部分将具有一定的背景颜色。
我的问题是,我目前的设置“有点”适用于IE(拉伸有点偏离),但不适用于Firefox和Chrome。我尝试了很多不同的东西,但是无法做到这一点。
出现的问题是,在Firefox和Chrome中,“封面”照片剪辑在底部背景后面,而在IE中,照片实际上按预期工作,并填充#top部分。
<html>
<head>
<title>Test</title>
<style>
html {
width:100%;
height:100%;
color:white;
}
body {
height:100%;
width:100%;
}
#top {
background: url(PZwx1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/BV-site-bgfoto.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/BV-site-bgfoto.jpg', sizingMethod='scale')";
height:79%;
}
#bottom {background: #F9525F;height:21%;}enter code here
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
</body>
</html>
我已经找到了这个例子; http://www.webdevout.net/test?02X
非常感谢任何帮助!
答案 0 :(得分:3)
删除“background:fixed”(这是它使用100%页面高度的原因)并使用“100%100%”而不是“cover”。应该这样做。
#top {
background: url(lalala.jpg) no-repeat center center;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale')";
height:79%;
}
如果fixed
很重要,请使用background-size:100% 79%
并将background:center
更改为background:top
#top {
background: url(lalala.jpg) no-repeat top fixed;
background-size:100% 79%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='lalala.jpg', sizingMethod='scale')";
height:79%;
}
(另外,将padding:0,margin:0
添加到您的身体)