浏览器兼容之background-size

最新推荐文章于 2021-06-07 17:12:22 发布

weixin_30852419

最新推荐文章于 2021-06-07 17:12:22 发布

阅读量178

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/loveyatou/p/4777892.html

版权

最近学习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>

记录下学习笔记。

转载请标明出处。

转载于:https://www.cnblogs.com/loveyatou/p/4777892.html