这是我的客户网站 - http://rubowarkitekter.dk/ 我已经编码使背景图像高度和高度宽度根据调整屏幕尺寸/ 100%高度和& 100%宽度。但这不适用于IE11。
我的css代码 -
.home {
background: url(http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg) center center no-repeat fixed;
background-size: cover;
z-index: -500;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale');/* To make IE work */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale')"; /* To make IE work */
}
我知道如何才能将背景图像设置为高度和高度IE11上的宽度为100%。
由于
IE11截图 -
答案 0 :(得分:1)
CSS-Tricks的Chris Coyier提出了3个非常好的解决方案,其中2个是纯CSS。
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 强>
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
<强> CSS 强>
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE fallback support */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
答案 1 :(得分:1)
这里的问题是图像不背景图片。从你的代码 -
<img src="http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg" class="home">
这是一张图片元素,而不是CSS中添加的背景图片。
您应该做的是将背景图像添加到“body”元素或div包装器。
有许多建议我认为重要 -
使用HTML 5 doctype而不是XHTML transitional
删除body元素上的oncontextmenu事件处理程序 - 不会阻止某人保存您的图片,但会惹恼您的用户。
验证您的网站,主页上有33个错误 - 这意味着您的用户在浏览器中会出现不一致的结果。您的网站在Google Chrome中无法正常运行。
组织你的CSS,我看不出你引用的代码实际存在于任何已加载的样式表中(目前它只是开发人员吗?)。
无论您使用供应商前缀(-moz,-webkit等),这些都应该出现在之前标准属性(没有前缀),以便使用它而不是浏览器支持该属性后的供应商前缀。
使用CSS tricks clear-fix代码之类的内容清除您的花车。例如,社交媒体小工具。
不使用position:fixed或position:absolute for layout - 您无法控制用户访问的视口/设备/窗口大小,因此无法假设特定宽度