JinLinC个人在线文档库

背景与渐变

背景

属性	描述
`background-color`	背景颜色
`background-image`	指定元素背景的图像，图像会重复出现覆盖整个元素：`background-image: url("paper.png");`注意：背景图片不会改变元素的尺寸，如果背景的尺寸比标签容器小，背景就会不断重复的覆盖，直到填满这个标签为止，当然，我们可以使用逗号分割，连接使用设置多个背景：`background-image: url(1.jpg),url(2.jpg);`但是这样设置，两个背景是叠在一起的，我们可以设置`background-position: top left, center;`来使两个背景图片分开
`background-repeat`	设置图像的重复方向，`repeat-x`表示在水平方向重复；`repeat-y`表示在垂直方向重复；`no-repeat`表示图像不重复，只显示一次；`space`设置背景图片重复时的大小都相等，也没有只有半个背景的图片（先将容器的体积计算好，再分配给背景图片）
`background-attachment`	设置背景图像是应该滚动还是固定的，`fixed`表示指定固定的背景图像；`scroll`表示指定滚动的背景图像（会随着滚动条滚动而移动）
`background-position`	指定背景图像的位置，其值用`right top center bottom left`定位位置，可以进行组合使用，如右上方`background-position: top right`，也可以通过像素大小和百分比进行调节背景图片的位置
`background-size`	设置背景尺寸，我们可以对背景图片的尺寸进行修改，设置背景图片的宽度和高度：`background-size: 100px 100px;`如果内容区域的比例和图片的比例不一致，图片可能会丢失；我们可以通过`background-size: contain;`保证图片可以按照比例完整的显示出来，这样可能会使容器中还有一定的留白

css

/*使用简写属性在一条声明中设置背景属性：要严格按照上表中的自上到下的顺序简写，缺属性不要紧，顺序不能错*/
body {
  background: #ffffff url("tree.png") no-repeat right top;
}

可以通过有效的颜色名red指定颜色，也可以通过十六进制#ff0000指定颜色，还可以通过rgb值来指定颜色rgb(255,0,0)，或者可以通过rgba来进行颜色的指定（a表示透明度）

背景是不受内边距影响的，会直接沿伸到边框的位置，对于这个问题，我们可以设置背景裁切，使背景只到内容区域：background-clip: content-box;，还可以指定显示到其他的区域，如：

background-clip: content-box;：背景只沿伸显示到内容区域
background-clip: padding-box;：背景沿伸显示到包含内边距的区域
background-clip: border-box;：背景沿伸显示到包含边框的区域

盒子阴影

盒子阴影和文本阴影类似，通过box-shadow属性进行设置

html

<body>
    <div>jlc</div>
</body>

<style>
    div {
        width: 300px;
        height: 300px;
        border: solid 2px #ddd;
        box-shadow: 10px 10px 10px rgba(100, 100, 100, 1);
    }
</style>

对于box-shadow中设置的数据，第一个和第二个10px表示盒子阴影的偏移量，第三个10px表示阴影的模糊效果

元素背景的渐变色

常见的渐变有

线性渐变：从一个颜色过度到另一个颜色，可以定义多个颜色
我们可以通过CSS来控制线性渐变：
css
```
background: linear-gradient(red, green, blue);
```
垂直方向由上往下进行红绿蓝渐变，每个颜色占百分之30，中间会产生过度色
想要渐变方向为水平方向，我们可以进行以下的设置：
- 通过度数：background: linear-gradient(90deg, red, green, blue);
- 通过方向：background: linear-gradient(to right, red, green, blue);
镜像渐变：颜色渐变从内部往外扩散的，渐变颜色区域为圆形区域
css
```
background: radial-gradient(red, green, blue);
```
我们可以设置镜像渐变圆的大小：
css
```
background: radial-gradient(100px 100px, red, green, blue);
```

渐变的标志位：我们可以通过标志位来控制渐变区域的范围，控制从哪个位置开进行渐变：

css

background: linear-gradient(90deg, red 50%, green);

完整红色的部分占据50%，之后再开始进行渐变
css
background: linear-gradient(90deg, red 50%, green 50%);
两个颜色都占据50%，那就不进行渐变，红色和绿色的背景都占据50%

镜像渐变结合渐变标志位绘制小太阳：

css

div {
    width: 150px;
    height: 150px;
    background: radial-gradient(red, yellow 30%, black 70%, black 100%);
}

渐变阀值：

css

background: linear-gradient(90deg, red, 30%, green); 
// 在两边标识位的中间位置设置颜色线性渐变点，30%说明绿多红少
// 100%表示设置位全部红色

使用渐变重复来绘制网站的进度条：

css

// 以25px的像素进行重复渐变
background: repeating-linear-gradient(90deg, blue, yellow 25px, red 50px);

背景与渐变 ​

背景 ​

盒子阴影 ​

元素背景的渐变色 ​

背景与渐变

背景

盒子阴影

元素背景的渐变色