作为响应式设计的背景图像
问题描述:
如果我有这组divs,如何在浏览器调整大小时更改每个背景图像的尺寸?基本上把盒子的所有内容作为响应式设计。作为响应式设计的背景图像
所以最大宽度是图像的尺寸。
<div class="box">
<div class="dog_1"></div>
<div class="dog_2"></div>
<div class="dog_3"></div>
<div class="dog_4"></div>
</div>
div[class*='dog_'] {
background: url("http://ecx.images-amazon.com/images/I/419c%2BE2j0kL._SL500_AA300_.jpg");
background-repeat: no-repeat;
height:200px
}
演示在这里: http://jsfiddle.net/LPKkk/
答
你可以使用背景-size属性: https://developer.mozilla.org/en-US/docs/CSS/background-size
然而它在IE7中不受支持& 8.如果您需要支持这些浏览器,则可能必须使用基于百分比宽度和高度的图像元素,而不是背景图像或IE的专有过滤器。例如:
约IE图像过滤器filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale');
一件事是,所述图像路径相对于HTML文档(等的元件),而不是相对于像一个正常的背景图像的CSS文件。
答
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
(我不得不使用某种原因!重要的是得到了盖最后一次工作)
你的jsfiddle链接是错误的 –
谢谢,更新 – anvd