最近學習C3發現background-size有了幾個新的設置值。
background-size: auto | <長度值> | <百分比> | cover | contain 1、auto：默認值，不改變背景圖片的原始高度和寬度； 2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放； 3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上； 4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器； 5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
准備嘗試一下，挨個實驗后效果還是挺好，結果在IE7，8上不起作用。以前也沒注意到，百度了一圈，終於解決了。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='11.gif', sizingMethod='scale');
過濾器輕松解決。
IE中各個版本都可以了
例子如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "微軟雅黑";
font-size: 14px;
}
.fillbody {
position: relative;
width: 580px;
margin: 50px auto;
height: auto;
border: 1px dashed #ccc;
overflow: hidden;
padding-bottom: 60px;
}
.fillbody ul {
overflow-y: auto;
min-height: 160px;
max-height: 400px;
}
.fillbody ul li {
height: 102px;
width: 60px;
float: left;
list-style-type: none;
margin: 15px;
}
.fill-a-img {
width: 100%;
height: 80px;
display: block;
overflow: hidden;
text-decoration: none;
}
.fillbottom {
height: 22px;
text-align: center;
line-height: 22px
}
.fillbody-footer {
clear: both;
left: 50%;
margin-left: -65px;
bottom: 20px;
width: 130px;
height: 30px;
display: block;
position: absolute;
}
.fill-in-line {
background: url('11.gif') no-repeat;
background-size: 60px 80px;
-moz-background-size: 60px 80px;
-ms-background-size: 60px 80px;
-o-background-size: 60px 80px;
-webkit-background-size: 60px 80px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='11.gif', sizingMethod='scale');
}
.fill-off-line {
background: url('22.gif') no-repeat;
background-size: 60px 80px;
-moz-background-size: 60px 80px;
-ms-background-size: 60px 80px;
-o-background-size: 60px 80px;
-webkit-background-size: 60px 80px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='22.gif', sizingMethod='scale');
}
</style>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" type="text/css" />
</head>
<body>
<div class="fillbody">
<ul>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">eee</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ddd</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ccc</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">bbb</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">aaa</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">eee</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ddd</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ccc</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">bbb</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">aaa</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">eee</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ddd</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ccc</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">bbb</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">aaa</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">eee</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ddd</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ccc</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">bbb</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">aaa</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">eee</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ddd</div>
</li>
<li>
<a href="#" class="fill-a-img fill-in-line">
</a>
<div class="fillbottom">ccc</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">bbb</div>
</li>
<li>
<a href="#" class="fill-a-img fill-off-line">
</a>
<div class="fillbottom">aaa</div>
</li>
</ul>
<input type="button" class="btn btn-primary fillbody-footer" value="結束/轉接"/>
</div>
</body>
</html>
記錄下學習筆記。
轉載請標明出處。