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写法建议参照网易云课堂的课件
参考资料
网易云课堂前端微专业
