前端——关于背景相关属性你不知道的小知识_前端计算背景图片的颜色-CSDN博客

本文链接：https://blog.csdn.net/Bingtangbgd/article/details/125027727

本文详细介绍了CSS3中关于背景的属性，包括背景颜色的多种表示方式，如单词、16进制和rgba；背景图片的设置，以及如何通过`background-repeat`控制图片平铺；背景图片的位置调整`background-position`；以及如何使用`background-size`调整图片大小以适应元素。最后，文章提到了复合属性`background`，允许一次性设置多个背景属性。

摘要由CSDN通过智能技术生成

#博学谷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）; 如下图所示：