css第十课：列表属性及背景属性

1.列表属性

 （1）list-style-type：就是定义列表前面是小圆点还是小方块之类的

代码如下：

 结果：

（2）list-style-image：url（图片位置）

 无序列表前面默认是disc实心圆，当然我们也可以将前面的符号改为图片，代码如下：

 当然这个list-style属性也是可以放在一起的，代码如下：

 list-style后面跟的属性值是属性list-style-type/list-style-image的结合，上面代码的含义是，none表示的是list-style-type：none，前面没符号，url就是list-style-image的属性值了

但是最常用的还是取消列表前面的图片或者符号，给前面加上独特的样式，所以我们一般用的还是：list-style：none

代码如下：

 结果：

 2.背景属性

注意：贴背景时，背景所在的盒子一定要有高度，不然这个背景也加载不出来

 （1）background-color属性的写法跟color的属性写法一样，链接下面的“2.color颜色属性”

见链接：

css第八课：文本属性（字体，颜色属性）_陌一一的博客-CSDN博客

但background-color多了一种写法：可以设置透明度

rgba（参数1，参数2，参数3，参数4）

参数1：是红色的强度 同理参数2和3分别是绿色和蓝色的强度，参数4是透明度，指的是最终呈现的颜色的透明度，最大的透明度是1，

代码如下：

结果：

（2）background-image属性：将背景贴上图片

代码如下：

我们设置了一个400*400的背景大小，并赋予黄色的背景，这时候我想将背景换成图片，但是这个图片比这个背景要小，这时候这个图片该怎么呈现呢，看如下结果所示：

结果：

 结果发现当我们的图片小于背景的大小的时候，它默认是平铺的方式铺满整个背景，并不会说只有一张图片，

那如果我们的图片大小大于背景，这时候会怎么显示呢，我们往下看：

代码演示：

结果：

 当我们图片比背景大时，我们的图片就加载不完全

那如果我们不想让小图平铺整个面积或者不想让大图裁剪右边位置，这时候就用到其他的属性，往下看：

代码如下：

 让小图在x轴平铺，结果如下：

 同理在y轴平铺的代码为：background-repeat：repeat-y

结果：

 还有不平铺的方式，代码：background-repeat：no-repeat

结果：

 （3）background-position背景图片定位，图片位置的属性，（当图片不平铺时）

 我想调整小图的位置，有三种写法

11.background-position:20px 20px  含义是：距离左边20px，距离上面20px的位置

22.background-position：10% 10% 含义是：离左边的距离占宽度的10%，离上面的距离占高度的10%（不常用，知道就行）

33.background-position：left center 含义是：水平方向的左边，垂直方向的右边

第一个参数有left center right 3个属性值    第二个参数有top center bottom 3个属性值

（4）background-size改变图片的大小使其铺满整个背景

代码：400*400是背景的大小，我们这里将图片大小也设置成400*400，这样就会铺满整个背景

结果：

 结果发现图片确实会铺满整个背景，但是图片已经失真了，

还有几种写法分别是：

（2）100% 100%    （3）cover    （4）contain

cover的结果：

 cover的原理是：将图片等比例缩放，使之覆盖整个背景，但是这时候某一边多出来的图像就显示不出来了

contain的结果：

 contain的原理是将图片扩展至最大尺寸，使其宽度或者高度完全适应内容区域（最长的那边完全适应区域），但是这个时候，因为只有一边完全占满区域了，另一边就占不满区域，就会有留白。

（5）background-attachment属性

 看下面这个图片，当我们将高度增加超过body的高度时，这时候右边就会出现一个滚动条，当这个黄色背景上有一张图片，不出意外当我们在向下拉动滚动条的时候，这个图片会随之跑到上面去被掩盖掉，那如果我们想要实现，当我们向下拉动滚动条时，这个图片也跟着向下面滚动，一直出现在我们眼前，该怎么做呢，这时候就要用到我们上面这个属性了：background-attachment

 默认属性值是scroll，如果你想让它跟着滚动条向下滑动，属性值为fixed

代码：

结果： 

注意说明一点：这个当你用了fixed属性，它指的是固定在浏览器视口的左上角往下随滚动条移动，这个黄色背景是设置的盒子模型，当我们把盒子模型在浏览器中间显示时，这个图片还是在左上角，并不受盒子模型的控制，所以当你盒子模型在浏览器中间显示时，因为现在这个图片没有盒子模型承载所以就不显示了，代码如下：

 结果：

 （6）背景的复合属性写法

将background属性写在一起，

代码如下：

 写法规则：

1.属性值之间用空格隔开

2.顺序可以调换

3.可以只取一个值，放在后面能覆盖前面的值，指的是看下图解释：

4.background-size属性只能单独用，不能写在复合属性里

 解释：第3条规则，只能取一个值，放在后面能覆盖前面的值，你看这个代码，上面背景颜色background-color单独写了，下面又写了一个background，但是这个下面的background里面没有包含颜色属性，所以按照下面没有写的背景颜色来，就是白色，所以结果只有一张图片，没有背景，因为下面的代码没写背景，覆盖了上面的代码，所以结果如下所示：