前端——关于背景相关属性你不知道的小知识

#博学谷IT学习技术支持#

目录

背景相关属性

背景颜色

背景图片

背景图片平铺状态

背景图位置

背景图大小

背景图复合属性

总结

背景相关属性

背景颜色

背景颜色，格式：background-color: 颜色；

背景颜色属性可以给一个标签加上背景色，用background-color属性可以实现，先看如下示例：

可以看到，浏览器中渲染出一个宽高100*100的粉色div标签区域，当然，颜色有很多种，也可以使用其他颜色，那么问题来了，背景颜色属性知道了怎么写，那么属性值应该怎么写，下面给大家介绍属性值的写法：

1.直接写颜色对应的单词，就像上图中的粉色（pink）一样，其他的还有比如：红色（red），绿色（green），蓝色（blue），天蓝色（skyblue）等等；

2.#号+6位16进制数（0-9和a-f），也就是rgb颜色对应的比例（r、g、b分别用两个16进制数），比如白色对应的rgb值（ffffff），黑色（000000），那么白色背景色写法就是：background-color:#ffffff;    黑色背景色就是：background-color:#000000; 还有一种简写的方式，只能是对应的16进制数一致时可以只写一个，比如说黑色和白色，就可以写成#000，#fff，这样也是可以的，如下图：

 其他颜色用法与之相同，比如#777777可以写成#777，#aaaaaa可以写成#aaa，#aabbcc可以写成#abc等等，这里就不一一列举了；

3.使用rgba的写法，rgb还是对应的三原色的颜色色值，不过，这里用的不是16进制，而是十进制（r、g、b分别对应0-255之间的数），比如白色就不能写成（ffffff）了，而是应该写成（255,255,255），而且它们之间用逗号隔开，rgba中的a表示透明度，是一个0-1之间的数，用法：background-color:rgba（255,255,255,0.5）; 如下图所示：

 该图中用的是白色背景色，与页面背景色一样，所以加了个边框，能明显看出该区域，边框属性将在后面讲解，这里不做过多解释，透明度设置的1，也就是不透明，为0的话就是全透明，它们之间都用逗号隔开。有时候加背景颜色并不会好看，所以背景除了颜色以外，还有图片

背景图片

背景图片：background-image：url（路径）

可以设置背景图片，废话不多说，直接看示例：

 可以看到，通过背景图片属性，路径属性值，可以给标签区域设置背景图片，上图中出现了约四张一样的图片，涉及到下面要讲的平铺，这里只需要知道background-image可以设置背景图片即可，那么下面说一下平铺的状态

背景图片平铺状态

平铺属性background-repeat

承接上文，设置背景图片之后，由于背景图片的大小与设置的标签的大小不会完全吻合，图片大小小于标签大小时，会导致背景图平铺，这也是背景图属性的默认平铺状态，我们可以通过设置平铺属性更改该状态，属性值一共有四个，如下表格

这里会在上面的基础上，设置四个div标签，通过类名修改不同的的div标签，以此来设置四种不同的平铺属性，就不在给出截图，直接看浏览器渲染效果：

 以上就是平铺的四种属性值效果，一般情况下，我们会选择不平铺，也就是no-repeat，那么，图片太小，不能把标签铺满，又不想使用平铺怎么办呢，可以使用背景图位置属性，调整位置让结果更美观 

背景图位置

背景图位置属性:background-position，背景图位置属性的属性值有两种写法：

第一种就是使用左中右，上中下的英文单词（left，right，top，bottom，center），比如想让背景图处在左上，正中，右下三种情况如下：

 .d1这些是通过类选择器加给三个div，以此来设置不同属性，需注意的是，如果背景图在正中间，x，y方向都在中间，可以省略一个center，只写一个也是同样的效果，但是如果不是这样，就必须要写两个方向的位置，两个位置单词可以写反，也就是没有顺序，可以先写垂直在写水平，也可以先写水平在写垂直，因为上下和左右的英文单词不一样，所以所以没有顺序，浏览器可以自动识别那些单词是垂直方向的，哪些是水平方向的。

第二种方法就是使用数字+px，

比如  background-position: 100px 100px;   意思就是距离左边，上边多少像素，需要注意的是，它是以左上角顶点为圆点，向右为+x，向左为-x，下为+y，上为-y，下面给大家看两个示例，一个负值，一个正值：

 第三个作为比较，是默认情况，第一个因为向左上偏移，所以显示不全，第二个表示向右下偏移

只是移动了背景图片的位置，以旧填不满标签区域，所以，就有了下面要讲的背景图大小属性。

背景图大小

背景图大小：background-size，他可以设置背景图片的大小，使其宽高按设定值进行缩放，图片太大会导致图片显示不全，图片太小会导致图片平铺，所以我们可以调整图片大小，让图片正好完全覆盖标签区域，那么背景图大小属性值有四种表示方法，如下表格所示：

下面我们来看一下具体的示例

 为了能更清楚的看出差异，我给标签加了背景颜色，现在可以很清楚的看到，前两种方法（数字+px，百分比）使用不当会使图片拉伸变形，这是因为同时设置了各自的宽高，图片就会按照设置好的大小进行调整，如果设置的宽高比例与原图宽高比不一致，就会按照设置的调整，导致变形，所以不推荐使用，如果真的有需要，建议按照原图宽高比设置宽高，或者只设置宽，高度会自动按比例缩放。

而后两种方法的缺点也很明显，cover，覆盖，标签会被完全覆盖，但是图片没有显示完全。contain，包含，图片会被标签完全包含，但是标签未被完全覆盖，有留白。

其实平时用到最多的是后两种，而且使用那个都可以，这是因为设计师给的设计图中，图片和标签的宽高比是一致的，不会出现以上种种情况，所以，上述情况大可不必担心，只需记清楚他们的用法以及效果就行

背景图复合属性

复合属性也就是上述各个属性的组合体，推荐用，background: color image repeat position/size，其实这里是不需要严格按照此顺序写相关属性的，只是推荐使用该顺序。上面的属性可以称为拆分属性，一次只能设置一个属性，而复合属性可以一次把所有相关属性写在一起，空格隔开，写法与拆分属性一致，这里不在过多解释。

总结

前端——关于背景相关属性你不知道的小知识

#博学谷IT学习技术支持#

目录

背景相关属性

背景颜色

背景图片

背景图片平铺状态

背景图位置

背景图大小

背景图复合属性

总结

背景相关属性

背景颜色

背景颜色，格式：background-color: 颜色；

背景颜色属性可以给一个标签加上背景色，用background-color属性可以实现，先看如下示例：

可以看到，浏览器中渲染出一个宽高100*100的粉色div标签区域，当然，颜色有很多种，也可以使用其他颜色，那么问题来了，背景颜色属性知道了怎么写，那么属性值应该怎么写，下面给大家介绍属性值的写法：

1.直接写颜色对应的单词，就像上图中的粉色（pink）一样，其他的还有比如：红色（red），绿色（green），蓝色（blue），天蓝色（skyblue）等等；

2.#号+6位16进制数（0-9和a-f），也就是rgb颜色对应的比例（r、g、b分别用两个16进制数），比如白色对应的rgb值（ffffff），黑色（000000），那么白色背景色写法就是：background-color:#ffffff;    黑色背景色就是：background-color:#000000; 还有一种简写的方式，只能是对应的16进制数一致时可以只写一个，比如说黑色和白色，就可以写成#000，#fff，这样也是可以的，如下图：

 其他颜色用法与之相同，比如#777777可以写成#777，#aaaaaa可以写成#aaa，#aabbcc可以写成#abc等等，这里就不一一列举了；

3.使用rgba的写法，rgb还是对应的三原色的颜色色值，不过，这里用的不是16进制，而是十进制（r、g、b分别对应0-255之间的数），比如白色就不能写成（ffffff）了，而是应该写成（255,255,255），而且它们之间用逗号隔开，rgba中的a表示透明度，是一个0-1之间的数，用法：background-color:rgba（255,255,255,0.5）; 如下图所示：

 该图中用的是白色背景色，与页面背景色一样，所以加了个边框，能明显看出该区域，边框属性将在后面讲解，这里不做过多解释，透明度设置的1，也就是不透明，为0的话就是全透明，它们之间都用逗号隔开。有时候加背景颜色并不会好看，所以背景除了颜色以外，还有图片

背景图片

背景图片：background-image：url（路径）

可以设置背景图片，废话不多说，直接看示例：

 可以看到，通过背景图片属性，路径属性值，可以给标签区域设置背景图片，上图中出现了约四张一样的图片，涉及到下面要讲的平铺，这里只需要知道background-image可以设置背景图片即可，那么下面说一下平铺的状态

背景图片平铺状态

平铺属性background-repeat

承接上文，设置背景图片之后，由于背景图片的大小与设置的标签的大小不会完全吻合，图片大小小于标签大小时，会导致背景图平铺，这也是背景图属性的默认平铺状态，我们可以通过设置平铺属性更改该状态，属性值一共有四个，如下表格

这里会在上面的基础上，设置四个div标签，通过类名修改不同的的div标签，以此来设置四种不同的平铺属性，就不在给出截图，直接看浏览器渲染效果：

 以上就是平铺的四种属性值效果，一般情况下，我们会选择不平铺，也就是no-repeat，那么，图片太小，不能把标签铺满，又不想使用平铺怎么办呢，可以使用背景图位置属性，调整位置让结果更美观 

背景图位置

背景图位置属性:background-position，背景图位置属性的属性值有两种写法：

第一种就是使用左中右，上中下的英文单词（left，right，top，bottom，center），比如想让背景图处在左上，正中，右下三种情况如下：

 .d1这些是通过类选择器加给三个div，以此来设置不同属性，需注意的是，如果背景图在正中间，x，y方向都在中间，可以省略一个center，只写一个也是同样的效果，但是如果不是这样，就必须要写两个方向的位置，两个位置单词可以写反，也就是没有顺序，可以先写垂直在写水平，也可以先写水平在写垂直，因为上下和左右的英文单词不一样，所以所以没有顺序，浏览器可以自动识别那些单词是垂直方向的，哪些是水平方向的。

第二种方法就是使用数字+px，

比如  background-position: 100px 100px;   意思就是距离左边，上边多少像素，需要注意的是，它是以左上角顶点为圆点，向右为+x，向左为-x，下为+y，上为-y，下面给大家看两个示例，一个负值，一个正值：

 第三个作为比较，是默认情况，第一个因为向左上偏移，所以显示不全，第二个表示向右下偏移

只是移动了背景图片的位置，以旧填不满标签区域，所以，就有了下面要讲的背景图大小属性。

背景图大小

背景图大小：background-size，他可以设置背景图片的大小，使其宽高按设定值进行缩放，图片太大会导致图片显示不全，图片太小会导致图片平铺，所以我们可以调整图片大小，让图片正好完全覆盖标签区域，那么背景图大小属性值有四种表示方法，如下表格所示：

下面我们来看一下具体的示例

 为了能更清楚的看出差异，我给标签加了背景颜色，现在可以很清楚的看到，前两种方法（数字+px，百分比）使用不当会使图片拉伸变形，这是因为同时设置了各自的宽高，图片就会按照设置好的大小进行调整，如果设置的宽高比例与原图宽高比不一致，就会按照设置的调整，导致变形，所以不推荐使用，如果真的有需要，建议按照原图宽高比设置宽高，或者只设置宽，高度会自动按比例缩放。

而后两种方法的缺点也很明显，cover，覆盖，标签会被完全覆盖，但是图片没有显示完全。contain，包含，图片会被标签完全包含，但是标签未被完全覆盖，有留白。

其实平时用到最多的是后两种，而且使用那个都可以，这是因为设计师给的设计图中，图片和标签的宽高比是一致的，不会出现以上种种情况，所以，上述情况大可不必担心，只需记清楚他们的用法以及效果就行

背景图复合属性

复合属性也就是上述各个属性的组合体，推荐用，background: color image repeat position/size，其实这里是不需要严格按照此顺序写相关属性的，只是推荐使用该顺序。上面的属性可以称为拆分属性，一次只能设置一个属性，而复合属性可以一次把所有相关属性写在一起，空格隔开，写法与拆分属性一致，这里不在过多解释。

总结