根据给定的脚本
<style>
.x{
background: url('img.jpg') no-repeat;
background-size: contain;
height: 100%;
}
</style>
<div class="x"></div>
它适用于 chrome 和 firefox ......任何想法如何使它与 IE 7、8、9 一起工作
我尝试了很多脚本,但没有什么能像 FF 和 chrome 那样运行良好。
根据给定的脚本
<style>
.x{
background: url('img.jpg') no-repeat;
background-size: contain;
height: 100%;
}
</style>
<div class="x"></div>
它适用于 chrome 和 firefox ......任何想法如何使它与 IE 7、8、9 一起工作
我尝试了很多脚本,但没有什么能像 FF 和 chrome 那样运行良好。
9 之前的 IE 不支持 background-size:
http://www.css3.info/preview/background-size/
你必须想出一种不同的技术来处理这种情况。有关解决方法的说明,请参阅此:http: //kimili.com/journal/the-flexible-scalable-background-image-redux
如果您想要一个示例(我不会声称这是一个很好的示例,但从技术上讲,它可以工作),您可以查看我去年为这个网站工作的代码。客户想要一个缩放到屏幕大小的背景图像,但在幻灯片旋转时也会发生变化,所以它有点可怕,代码方面:
您需要注意http://www.buzzhoney.com/Content/style.css中的各种设置
这个网站也应该是响应式的,所以这里有几个级别的@media 查询可供查看。里面有很多东西,我没有时间重复一遍,但这里有一些亮点:
基于这个标记外壳(我已经删除了所有会妨碍这些主要元素如何协同工作的额外内容):
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
<!-- snip header stuff -->
</div>
<div id="main" role="main">
<!-- snip body stuff -->
</div>
<footer id="footer">
<!-- snip footer stuff -->
</footer>
<div id="background">
<div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
</div>
<!-- snip js includes, per best practices,
located at the bottom of the page -->
</div>
</body>
</html>
从第 316 行开始,我们为背景容器及其图像设置了初始样式,但仅适用于 320 像素到 480 像素宽的设备,适用于智能手机。然而,在 416 处,我们开始设置适用于 321px 宽及以上设备的样式:
#background
{
left: 0;
min-height: 730px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
height:100%;
}
#background img
{
left: 0;
min-width: 1200px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
display:block;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
注意容器(#background)如何设置为 100% 的宽度和高度,最小高度为 730 像素,内部图像设置为 100% 宽度,但没有指定特定高度,只有 1200 像素的最小宽度. 这基本上是说它会按比例放大,并且高度会与其宽度成比例地变化,但宽度永远不会低于 1200px,所以此时,容器将在图像周围折叠并隐藏不适合的多余部分它的区域(溢出:隐藏)。
另请注意,我使用 position:fixed 和 left:0, top:0 将背景容器锚定到位,并使用 z-index:-1 将其放置在其他所有内容的后面。
有一些小的修改可以在更高分辨率下添加一些其他功能,但没有什么能改变这个基本设置。出于您的目的,除非您想要褪色/变化的背景,否则您将删除以下线条:
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
因为它们会使背景图像不可见。