在 DIV 上实现跨浏览器兼容性的良好“背景大小：覆盖”后备/垫片/技巧？
Posted
技术标签:
【中文标题】在 DIV 上实现跨浏览器兼容性的良好“背景大小：覆盖”后备/垫片/技巧？【英文标题】：Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs? 【发布时间】：2012-03-08 23:59:06 【问题描述】：所以我使用background-size:cover 来实现所需的背景图像效果，该效果可以缩放到它所应用的任何大小的 div，同时保持纵横比。为什么使用这种方法？根据相关 WordPress 帖子中设置为图像的内容，通过 php 动态地使用内联 CSS 将图像应用为背景。
所以一切都很好，但是是否有任何后备措施来确保这至少在 IE8 中可以工作？可能有一些 javascript 修复？
已经尝试过backstretch 和supersized，但无济于事，因为它们仅将图像应用于页面背景。
你可以在over here看到它。
【问题讨论】：
【参考方案1】：在 IE8 或更低版本中，作为具有已定义宽度/高度的 div 的子级插入的前景图像是唯一的解决方法：
<!doctype html>
<html lang="en">
<head>
<title>Dynamic Image Sizing</title>
<style type="text/css">
html, body margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;
#pseudobg position:absolute; z-index:1; width:100%; height:100%;
#scroller position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;
#dyndiv position: absolute; left: 50%; width: 200px; height: 300px;
</style>
</head>
<body>
<div id="scroller">
<!-- Insert your content here -->
<div id="dyndiv">
<img id="pseudobg" src="http://www.***.com/favicon.ico" title="" />
</div>
</div>
</body>
</html>
如果不等效，请向Stu Nicholls 寻求进一步帮助。
演示：
【讨论】：
【参考方案2】：我之前尝试过答案，但它不能作为 background-size:cover;可以预期，它实际上确实使图像适合所选尺寸，但它没有将多余的部分剪裁到新的措施中，这是我对“覆盖”选项的期望。我的解决方案在这里找到：http://selectivizr.com/
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="path/to/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
<style>
.with-bg-size
background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
background-position: center;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale');
it didnt work as cover is expected */
width: 200px;
height: 100px;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
</style>
<body>
<div class="with-bg-size">Donald Duck!</div>
</body>
</html>
【讨论】：
【参考方案3】：如果您需要缩小而不是扩大图像的大小，则此方法不起作用。我发现避免使用 Javascript 的最佳方法是将两个图像叠加在一起，悬停时使顶部的图像透明。所有其他涉及调整原件大小的方法（例如，background-size）在 IE 中似乎都失败了。
CSS：
.social-btn-container
width:46px;
height:46px;
position:relative;
float: left;
margin-right: 15px;
.social-btn-container:hover > .top-btn
visibility:hidden;
.social-btn
margin:0;
padding:0;
border:0;
width: 46px;
height: 46px;
position: absolute;
left:0;
top:0;
.top-btn
z-index: 1;
.top-btn:hover
opacity: 0;
HTML：
<div class="social-btn-container">
<a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook">
<img src="images/icons/facebook_top.png" class="top-btn social-btn" />
<img src="images/icons/facebook_bottom.png" class="social-btn" />
</a>
</div>
.social-btn-container:hover > .top-btn 部分在 IE 怪癖模式下工作，该模式似乎不支持opacity，如果您使用:hovervisibility:hidden，则当可见性变为隐藏时，悬停会变为假，导致闪烁。 （外部 div 也定位图像。）我已经在 FF23、IE 标准和怪癖（让 IE 10 模拟 7、8 和 9）、Opera 和 Safari 中对此进行了测试。
【讨论】：
【参考方案4】：在IE8或以下使用分隔background:代码：
-webkit 示例：
background: url('img/habesha.jpg') no-repeat center center;
-webkit-background-size: cover;
- 在 IE 中尝试：
background-image:url('img/bright_switch.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;
更多详情：https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx
【讨论】：
以上是关于在 DIV 上实现跨浏览器兼容性的良好“背景大小：覆盖”后备/垫片/技巧？的主要内容，如果未能解决你的问题，请参考以下文章
将 div 中的 amazon s3 图像转换为画布时出现跨源问题