背景样式 | 易学教程

1. 什么是背景样式

背景样式是W3C规定的浏览器如何渲染元素的背景层，用户可以在背景层添加图片，颜色等效果

2. 背景颜色3种设置方式

（1）rgb模式：分别代表红绿蓝三种颜色，取值范围rgb(0,0,0)→rgb(255,255,255)
（2）rgba模式：a的取值范围0~1，代表透明度
（3）十六进制写法：取值范围 #000000~#ffffff

3. 背景颜色写法

background-color: red;

4. 背景图片写法

background-image: url(./images/1.jpg);

5. 背景平铺

background-repeat: 初始值为repeat;(默认重复)
分解为两个值:
background-repeat-x:repeat;
background-repeat-y:repeat;

如果不需要背景图片重复显示：
样式值可设置为no-repeat;

重复

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-image: url(./images/123.png);
            background-size: 100px 100px;
            /* background-repeat: no-repeat; */
        }

在这里插入图片描述

不重复

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-image: url(./images/123.png);
            background-size: 100px 100px;
            background-repeat: no-repeat;
        }

在这里插入图片描述

6. 背景大小（background-size）

数字类样式值：
百分比: 百分比的计算基数为元素的width和height;
像素: 直接数值;
(数值可以写一个或两个,如果只有一个第二个就是默认auto)

关键字类样式值：
cover: 图片等比缩放直到刚好覆盖背景区域
contain: 图片等比缩放,直到有一条边触碰到边框就停止

7. 背景图片显示基点

背景图片显示基点样式background-origin：规定了在图片不平铺的情况下，背景图片的左上角顶点的初始位置

content-box: 背景图片内容区左上角开始（内容区域开始）
在这里插入图片描述
padding-box: 背景图片从内边距左上角开始（padding开始）

border-box: 背景图片相当于边框左上角开始（边框左上角）

8. 背景图片裁剪（background-clip）

背景图片从开始裁切: background-clip

content-box: 只显示内容区部分的背景图片
padding-box:显示内容区和内边距部分的背景图片(默认)
border-box: 显示内容区、内边距和边框部分的图片

9. 背景图片关联依附

背景图片关联依附（background-attachment ）样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。
fixed：
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local：
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll：
此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

10. overflow 样式

overflow样式的作用就是，一个元素的内容太大而超出元素边缘时，浏览器对超出部分的内容如何处理
（1）overflow：visible;（默认）超出部分正常显示
在这里插入图片描述
（2）overflow: hidden; 超出部分隐藏

（3）overflow: scroll; 超出部分以滚动条显示

11. 复合样式写法

背景是复合属性:
background: color image repeat attachment position/size；
如： background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；
省略部分会被默认值替代,
position和size之间要用/分割

来源：CSDN

作者：喜欢爬虫的小朋友

链接：https://blog.csdn.net/gklcsdn/article/details/103451902

标签

background

background-size

overflow