5分钟彻底搞懂CSS Background

background-image

可以通过url("../image/sprite.png"); 引入, 这时候index.html与image文件夹是同一个层级的文件;

background-image: url(red.png), url(blue.png);

引入两个url后的效果: 先引入的在上面, 后引入的在下面

还可以在引入background-image之后继续写background-color, 这时候这个背景色会是在最底层;

background-color: green;

颜色总是在最底层

background-repeat

值可以写 repeat-x, repeat-y, repeat, space(repeat的时候会在图和图之间留一点空隙), round(repeat的时候对图可能会有一点变形效果), no-repeat;
引入几个background-image的url, 就允许最多写几次repeat值;

background-image: url(red.png);
background-repeat: no-repeat;

background-image: url(red.png), url(blue.png);
background-repeat: no-repeat repeat;

写两个值的话, 第一个针对x轴, 第二个针对y轴

可以看到的很重要的一点是, 如果blue的没有写的话, 那么会默认追随red的repeat设置, 也就是x轴no-repeat, y轴repeat;

background-attachment

值:scroll/fixed/local;
scroll的时候移动滚动条, 背景是不会动的;
local的时候移动滚动条, 背景会和内容一起滑动;
-fixed是说背景相对viewport绑定死, 一般不用;

background-position

可以写left, right, top, bottom这样的关键词;
也可以写百分比值;
还可以写length, 也就是具体20px这样;
可以写两个值, 第一个值表示x轴上的位置, 第二个是y轴上的位置;
position默认值是0 0

background-position: 10px 20px;

写length数值的时候是以左上角做原点来计算

background-position: 20% 50%;

写percent百分比的时候, 是将image的百分比和整个容器的百分比做了对应, 因此50% 50%的时候就居中了

background-position: 0% 100%;
background-position: left bottom;

这两句话是等价的. 不过如果我们用关键字只写一个词的话, 另外一个默认是center;

background-position: right;
background-position: 100% 50%;

这两句是等价的;
还有一种很特殊的写法, 是写四个值

background-position: right 10px top 20px;

写四个值的时候, left, top等关键词只表示从哪里开始数length了

sprite.png问题

用image引入, 用repeat保证它不变形和重复, 用position定好位置;

引入sprite三部曲image, repeat, position

盒模型问题(background-origin&clip)

默认状态下背景真正的位置在哪里?

默认状态下背景是算到padding-box
涉及的属性是background-origin

background-origin

决定原点的位置; (repeat平铺的时候会溢出到padding-box外面)
三个值: border-box/padding-box/content-box;
如果设置成content-box的话(经常可能会调用这个属性值), 背景图将不会显示在padding部分上了;

content-box下padding区域没有背景图

background-clip

width: 300px;
height: 200px;
border: 20px solid transparent;
padding: 30px;
background-color: blue;

aaa所在的是content, 灰色部分是padding, 可以看到border也被背景蓝色覆盖

background-clip真正决定了当背景平铺或者就是单纯颜色的时候, 它能够铺到哪里;
默认值是border-box; 可以自行修改成padding-box/border-box;

background-size

对整个图片的宽度改变往往会导致变形;
值可以写length, 比如 20px 20px, 图片一般会进行相应的放大缩小;
也可以写percent, 比如 50% 50%, 表示宽度和高度都是容器的50%
默认值是auto, 也就是原始图片的大小;
特殊值cover, 让图片最小的轴覆盖全容器;
特殊值contain, 让图片最长的轴覆盖全容器;

background(shorthand, 合写属性)

按照image, position/size, repeat, origin, clip的顺序写

注1: 最后如果只写一个content-box, 那么origin和clip都会被设置成content-box
注2: background-color只能写在第二层, 也就是底层背景中;

shorthand写法建议参照网易云课堂的课件

参考资料

网易云课堂前端微专业

最后编辑于：2017.12.04 03:51:55