CSS 多背景和渐变

2019-07-29 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · CSS · 背景 · 渐变 · background · linear · radial · gradient

设置多个背景

1
2
3
<body>
    <section></section>
</body>

1
2
3
4
5
section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景（用逗号隔开），默认第一个背景图片在最上面（image2.gif），类似的我们可以添加多个背景。

边框

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素，这样在我们设置 100% 的窗口的时候就计算起来特别麻烦，后来引入了一个 border-box 来解决这个问题。

1
2
3
4
5
6
section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}

1
2
3
4
5
6
7
section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}

box-sizing ：content-box|border-box|inherit;

content-box : 上面的默认行为，就是会拉伸宽度和高度。
border-box : 根据实际宽高来将边框和padding约束到元素内部。
inherit : 从父元素继承 box-sizing 属性的值。

背景裁剪

无论上面我们设置 box-sizing 是什么，会发现都会有背景在边框之下的现象，这样就会导致背景的一部分被边框裁切掉。

设置一个 background-clip: padding-box; 会达到我们期望的结果，看看效果：

background-clip ：border-box|padding-box|content-box;

border-box ：背景被裁剪到边框盒（默认）。
padding-box ：背景被裁剪到内边距框。
content-box ：背景被裁剪到内容框。

背景尺寸

background-size 属性接受水平和垂直两个值，这些值可以使用像素或者百分比，然后再加上一个可选的关键字 cover 或 contain。

background-size : length|percentage|cover|contain;

length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage：以父元素的百分比来设置背景图像的宽度和高度。
cover : 背景图等比缩放直到覆盖满整个元素。
contain ：背景图等比缩放后完全包含在元素中。

1
background-size: 300px;  //只制定宽度，高度等比缩放

1
background-size: 50% 50%;  //宽高均为容器的50%

1
background-size: cover;    //等比缩放到覆盖满整个图形

1
background-size: contain;  //比缩放后完全包含在元素中

线性渐变

1
background: linear-gradient(#fed46e, #ba5c61);

上面定义了一个简单的渐变，默认方向是从上到下，可以从8个方向中指定一个方向（left, right, top, bottom）：

1
background: linear-gradient(to left top, #fed46e, #ba5c61);

当然，为了更加灵活的调节渐变方向，也可以指定渐变的角度：

1
background-image : linear-gradient(30deg, #fed46e, #ba5c61);

增加几个渐变颜色，并指定每个颜色的开始渐变的位置：

1
background-image : linear-gradient(#b1585d,#fed46e 20%,#388fa2 60%); 

实现一种颜色突变，只需要将两个相邻颜色设置为一样：

1
background-image : linear-gradient(#b1585d,#fed46e 40%,#388fa2 40%); 

径向渐变

上面我们使用的是 linear-gradient 实现的线性渐变，接下来我们使用 radial-gradient 实现径向渐变。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
.flexbox .s0 {
    background-image : radial-gradient(#fed46e, #ba5c61);
}
.flexbox .s1 {
    background-image : radial-gradient(circle, #fed46e, #ba5c61);
}
.flexbox .s2 {
    background-image : radial-gradient(circle closest-side, #fed46e, #ba5c61);
}
.flexbox .s3 {
    background-image : radial-gradient(circle closest-corner, #fed46e, #ba5c61);
}
.flexbox .s4 {
    background-image : radial-gradient(circle farthest-corner, #fed46e, #ba5c61);
}
.flexbox .s5 {
    background-image : radial-gradient(circle farthest-side, #fed46e, #ba5c61);
}

closest-side 离圆心最近的边作为结束点。
farthest-side 离圆心最远的边作为结束点。
closest-corner 离圆心最近的一个角作为结束点。
farthest-corner 离圆心最远的一个角作为结束点。

接下来我们看几组移动圆心坐标的案例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
.flexbox .s0 {
    background-image : radial-gradient(circle at top left,#fed46e,#ba5c61);
}
.flexbox .s1 {
    background-image : radial-gradient(circle at top right, #fed46e, #ba5c61);
}
.flexbox .s2 {
    background-image : radial-gradient(circle at 40px 30px, #fed46e, #ba5c61);
}
.flexbox .s3 {
    background-image : radial-gradient(circle at 40px -30px, #fed46e, #ba5c61);
}
.flexbox .s4 {
    background-image : radial-gradient(circle , #b1585d 30%,#fed46e 30%,#fed46e 40%,#388fa2 40%);
}
.flexbox .s5 {
    background-image : radial-gradient(circle at top left, #b1585d 30%,#fed46e 30%,#fed46e 40%,#388fa2 40%);
}

重复渐变

重复渐变有 repeating-linear-gradient 和 repeating-radial-gradient 这两种类型。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
.flexbox .s0 {
    background-image : repeating-linear-gradient(90deg,#fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px);
}
.flexbox .s1 {
    background-image : repeating-linear-gradient(45deg,#fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px);
}
.flexbox .s2 {
    background-image : repeating-linear-gradient(45deg , #fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px,#388fa2 6px, #388fa2 9px);
}
.flexbox .s3 {
    background-image : repeating-radial-gradient(circle , #fed46e,#ba5c61 6px); 
}
.flexbox .s4 {
    background-image : repeating-radial-gradient(circle at bottom, #fed46e,#ba5c61 6px); 
}
.flexbox .s5 {
    background-image : repeating-radial-gradient(circle,  #fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px,#388fa2 6px, #388fa2 9px);
}

为了方便你自行测试，我贴出其余样式和布局代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
    <section class="flexbox">
    <div><div class="bgrg s0"></div><span>线性重复渐变</span></div>
    <div><div class="bgrg s1"></div><span>45度线性重复</span></div>
    <div><div class="bgrg s2"></div><span>三色线性重复</span></div>
    <div><div class="bgrg s3"></div><span>径向重复渐变</span></div>
    <div><div class="bgrg s4"></div><span>圆形偏移</span></div>
    <div><div class="bgrg s5"></div><span>三色径向渐变</span></div>
    </section>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.flexbox {
    display: flex;
    width: 600px;
    flex-wrap: wrap;
}

.flexbox div{
    text-align: center;
}

.flexbox .bgrg{
    width: 140px;
    height: 100px;
    margin: 20px;
    padding : 10px;
    border : 5px dashed rgb(0,0,0);
    box-sizing: border-box;
    background-clip:padding-box;
    text-align: center;
}

.flexbox span {
    color: #333;
    size: 10px;
}