引:background-size: 没有设置任何尺寸时使用图片本身的大小,宽度和高度都是auto默认值
可以用px设置成具体的值,也可以使用百分比
一:background-size参数取值
1.0
1个值 同时设置宽高 2个值 分别设置宽高
1.1
1 以px为单位的数字
2 %
3 cover 让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎
4 contain 让图片完全在容器中显示(等比例缩小)哪怕容器有空白,也没关系
1.2 作用范围
这些属性能够写在一个简单的属性中:background。必须指出background负责元素内容部分的背景,包括padding和border,但不包括margin。
二:实例分析
各种不同比例的适配问题,完美适配很少发生
2.1 参数分析
background-size: 100% 50%; 宽度占满屏幕,高度占50%
background-size: 100% 100%; 宽度高度都占满整个屏幕,除非图片完美适配,否则图片会变形
background-size: 100% auto; 宽度占满屏幕,高度自动适配,高度有所牺牲
background-size: auto 100%; 高度占满屏幕,宽度自动适配,宽度有所牺牲
至于是要牺牲宽度还是高度,具体问题具体分析,比如学子的沙发可以裁掉,有的背景图不能裁
background-size: cover;铺满整个容器,多余的部分会被裁掉
background-size: contain;至少有一张完整的图呈现出来,一定会有多余的空间
2.2 代码实例分析
背景图1和背景图2 you红色边框分隔开来
背景图1
背景图2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片的尺寸</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 版心尽量清爽一点,就设置宽度与居中 */
.center {
width: 900px;
margin: 0 auto;
}
/* 背景图1的相关设置 */
.pic {
/* 宽度使用父级的 */
height: 500px;
border: 5px solid red;
/* 加入背景图 */
background-image: url(img/bg.png);
/* 尺寸设置 */
background-size: 600px 300px;
/* 可以使用百分比,但是宽高都是100%的情况,防止图片变形 */
background-size: 100% 100%;
/* 宽度100%,高度自动适配,会牺牲一部分高度 */
background-size: 100% auto;
/* 宽度自动适配,高度100%,会牺牲一部分宽度 */
background-size: auto 100%;
/* 铺满整个屏幕,多余的部分会被裁掉 */
background-size:cover;
/* 至少有一张完整的图呈现出来,一定会有多余的空间 */
background-size:contain;
}
.shucai {
height: 300px;
background-image: url(img/carousel-1.jpg);
background-size: auto 100%;
/* 与contain是有区别的,注意观察两种值不同的效果 */
background-size: 100% auto;
/* 至少有一张完整的图片展现出来 */
background-size: contain;
/* 铺满整个容器,多余的部分会被裁掉 */
/* background-size: cover; */
}
</style>
</head>
<body>
<div class="bg1">
<div class="center">
<!-- pic这个要设置与背景图相关的样式 -->
<div class="pic"></div>
</div>
</div>
<div class="bg2">
<div class="center">
<!-- pic这个要设置与背景图相关的样式 -->
<div class="shucai"></div>
</div>
</div>
</body>
</html>
版权归原作者 <阿睿> 所有, 如有侵权,请联系我们删除。