Closed lulujianglab closed 6 years ago
我们在做项目的时候,通常会遇到设置背景图与屏幕大小相适应问题
而background中一些属性的取值是可以直接影响到背景图的呈现效果,包括CSS3当中新增的几个新的属性值:background-size,background-origin,background-clip,还有CSS1当中的background-position
之前在项目中达不到想要的背景图效果,总是将各种取值都试一遍,现在认真解析了一遍,每个值都要特点的效果,本篇文章主要是对上述几个属性做一下通俗易懂的解释
background-size: auto || <length> || <percentage> || cover || contain
auto: 默认值,保持背景图原有高度和宽度
length: 具体像素值,改变背景图大小
percentage:百分值(0%〜100%),作用于块元素,背景图大小取决于所在块元素的宽度百分比
cover: 背景图放大到铺满整个容器,适应于图片尺寸小于元素容器
container:背景图缩小到铺满整个容器,适应于图片尺寸大于元素容器
当取值为length或percentage,可以设置一个值 第二个值相当于auto auto的值与第一个值相同
<div class = "test"></div>
先加上初步的效果
.test { background: url("./images/background_image.jpg") no-repeat; width: 800px; height: 450px; line-height: 450px; border: 1px solid #999999; margin: 30px; }
找了张(380px*300px)左右的图片来当作背景图片使用
在上述.test{...}中增加一行
.test{...}
background-size:auto;
效果等同于没加background-size效果一样
同样的增加一行,如
background-size: 550px 300px;
从上张取值的效果图可以看出来,背景图片由(380px300px)变为(550px300px),已经变形失真
如果只取了一个值,比如background-size:350px ,相当于background-size:350px auto,此时auto的取值为350px/380px*300px
同样的增加一行,如
background-size:80% 50%;
从这张效果图我们可以看出来,背景图大小并不是按背景图的百分比来缩放的,而是按装载背景图的容器元素的百分比计算的,也就是长800px(div.width)80%,高450px(div.height)50%
如果只有一个值时,比如background-size:50%,相当于background-size:50% auto,相当于background-size: 50%800px(div.width) 50%800px(div.width)/380px(背景图长度)*300px(背景图高度)
上述两种取值也可以搭配使用,如
background-size:47.5% 300px;
background-size:47.5% 300px;的取值实际上就是图片自身的大小(380px*300px)了,效果也等同于一个值background-size:47.5%;
background-size:47.5%;
background-size:cover;
从上述效果图可以看到,背景图会放大到适合容器元素的尺寸,原则是背景图的width和height都需要等比例放大到填满容器,以至背景图在装载它的容器元素中占比大的一方向可能超出容器,比如上图中背景图的height明显超出了容器。和上一种取值background-size:100%的效果一样
background-size:100%
上面的cover取值是把背景图片放大到适合容器元素的尺寸,这时的contain刚好是跟cover相反,是把背景图片缩小到适合容器元素的尺寸
这里再重新定义一下容器元素的宽高
width:200px; height:200px; background-size:contain;
前面已经介绍了背景图片的大小是380px300px,而现在将容器元素改为200px200px
从效果图中我们可以看到背景图等比例的缩小到适合元素容器的尺寸,以至背景图在超出它的容器元素较少的一方向可能与容器有间隙,比如上图中背景图的height超出了100px,width超出了180px,所以等比缩小后height与容器间多出了空隙
从上边的几个效果值可以看出来,cover、contain的值、或者只设置一个值,另一个值为auto时,都不会出现失真的情况,但会出现图片显示不全或者与容器元素出现留白的情况
所以我们在项目开发中合理的定义容器元素的尺寸大小,根据容器尺寸大小和背景图大小合理的选用background-size的取值
图片定位的问题,比较容易理解,但也有需要注意的点。接下来还是从取值讲起
background-position: <关键词> || <百分比> || <像素值>
关键词:类似于background-position:top left
background-position:top left
像素:类似于background-position: 0px 0px
background-position: 0px 0px
百分比:类似于background-position: 0% 0%
background-position: 0% 0%
上面前两种定位都是将背景图左上角的原点放置到属性值位置
同样,在上述.test{...}中增加一行background-position: 50px 50px;
background-position: 50px 50px;
.test { background: url("./images/background_image.jpg") no-repeat; width: 800px; height: 450px; line-height: 450px; border: 1px solid #999999; margin: 30px; background-position: 50px 50px; }
可以看到,规定的位置是"50px 50px",也就是图片的左上角的原点在那个位置上
同理,当取值background-position: top left ;
background-position: top left ;
我们在做项目的时候,通常会遇到设置背景图与屏幕大小相适应问题
而background中一些属性的取值是可以直接影响到背景图的呈现效果,包括CSS3当中新增的几个新的属性值:background-size,background-origin,background-clip,还有CSS1当中的background-position
之前在项目中达不到想要的背景图效果,总是将各种取值都试一遍,现在认真解析了一遍,每个值都要特点的效果,本篇文章主要是对上述几个属性做一下通俗易懂的解释
background-size
取值
auto: 默认值,保持背景图原有高度和宽度
length: 具体像素值,改变背景图大小
percentage:百分值(0%〜100%),作用于块元素,背景图大小取决于所在块元素的宽度百分比
cover: 背景图放大到铺满整个容器,适应于图片尺寸小于元素容器
container:背景图缩小到铺满整个容器,适应于图片尺寸大于元素容器
当取值为length或percentage,可以设置一个值 第二个值相当于auto auto的值与第一个值相同
DEMO结构和效果
HTML Code
先加上初步的效果
找了张(380px*300px)左右的图片来当作背景图片使用
background-size:auto
在上述
.test{...}
中增加一行效果
效果等同于没加background-size效果一样
background-size:'length'
同样的增加一行,如
效果
从上张取值的效果图可以看出来,背景图片由(380px300px)变为(550px300px),已经变形失真
如果只取了一个值,比如background-size:350px ,相当于background-size:350px auto,此时auto的取值为350px/380px*300px
background-size:'percentage'
同样的增加一行,如
效果
从这张效果图我们可以看出来,背景图大小并不是按背景图的百分比来缩放的,而是按装载背景图的容器元素的百分比计算的,也就是长800px(div.width)80%,高450px(div.height)50%
如果只有一个值时,比如background-size:50%,相当于background-size:50% auto,相当于background-size: 50%800px(div.width) 50%800px(div.width)/380px(背景图长度)*300px(背景图高度)
上述两种取值也可以搭配使用,如
background-size:47.5% 300px;
的取值实际上就是图片自身的大小(380px*300px)了,效果也等同于一个值background-size:47.5%;
效果
background-size: cover
同样的增加一行,如
效果
从上述效果图可以看到,背景图会放大到适合容器元素的尺寸,原则是背景图的width和height都需要等比例放大到填满容器,以至背景图在装载它的容器元素中占比大的一方向可能超出容器,比如上图中背景图的height明显超出了容器。和上一种取值
background-size:100%
的效果一样background-size:contain
上面的cover取值是把背景图片放大到适合容器元素的尺寸,这时的contain刚好是跟cover相反,是把背景图片缩小到适合容器元素的尺寸
这里再重新定义一下容器元素的宽高
效果
前面已经介绍了背景图片的大小是380px300px,而现在将容器元素改为200px200px
从效果图中我们可以看到背景图等比例的缩小到适合元素容器的尺寸,以至背景图在超出它的容器元素较少的一方向可能与容器有间隙,比如上图中背景图的height超出了100px,width超出了180px,所以等比缩小后height与容器间多出了空隙
从上边的几个效果值可以看出来,cover、contain的值、或者只设置一个值,另一个值为auto时,都不会出现失真的情况,但会出现图片显示不全或者与容器元素出现留白的情况
所以我们在项目开发中合理的定义容器元素的尺寸大小,根据容器尺寸大小和背景图大小合理的选用background-size的取值
background-position
图片定位的问题,比较容易理解,但也有需要注意的点。接下来还是从取值讲起
取值
关键词:类似于
background-position:top left
像素:类似于
background-position: 0px 0px
百分比:类似于
background-position: 0% 0%
DEMO结构和效果
上面前两种定位都是将背景图左上角的原点放置到属性值位置
同样,在上述
.test{...}
中增加一行background-position: 50px 50px;
.test { background: url("./images/background_image.jpg") no-repeat; width: 800px; height: 450px; line-height: 450px; border: 1px solid #999999; margin: 30px; background-position: 50px 50px; }
效果
可以看到,规定的位置是"50px 50px",也就是图片的左上角的原点在那个位置上
同理,当取值
background-position: top left ;
效果