2021/8/9 css背景

背景

背景图片：

repeat就是平铺效果。
平铺：
沿着x（沿着y同理）：
norepeat就是不重复，就一张：

设置背景图片位置

写方位词

top center bottom left right 就是把背景画成一个九宫格，然后用两个方位词调位置。

（画这破图真的好累，好想买根笔。。。有笔就不用这么辛苦用电脑触摸屏画了。。。。）

用偏移量（类似绝对定位？）

可以写百分比也可以直接写多少px，百分比应该是按照整个背景容器的长宽来作为标准的。
水平的是距离左边的多少，垂直是距离上面的多少。
负值会被盖一点。
这个是在上面那个九宫格上面改的，要是只写一个也会，默认写的水平，然后垂直就默认跳到center啦。

背景图片

简写

雪碧图

优化页面加载速度

渐变

线性渐变

补充：
background-image:repeating-linear-gradient 这个是重复平铺渐变，再设置no-repeat是没有用的。我感觉no-repeat是针对背景图的。

尝试了一下，后面指定的数字是颜色从哪里开始，比如下面的例子，红色从50px开始，黄色从300px开始，50-》300的用渐变填充，0-》50跟300-》容器底部的空白部分用纯色填充

在平铺情况下就更明显了，空白部分不使用纯色填充，其实就是50px整条红线，60px整条黄线，50-》60这10px整个红黄渐变而已啦，其他空白的区域就用这10px的红黄渐变去平铺。

径向渐变