# 页面展示：
# html部分：
# css部分：
.mark-box的父元素设置相对定位，然后设置最大高度
.mark-box{
position: absolute;
bottom: 50px;
left: 0;
right: 0;
height: 109px;
border-bottom: 9px solid #eee;
box-sizing: content-box;
.mark{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 109px;
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 13%,#eee 83%);
}
.mark-text{
position: absolute;
bottom: 8px;
left: 0;
text-align: center;
color: rgba(1, 141, 191, 0.8);
width: 100%;
font-size: 14px;
height: 14px;
line-height: 14px;
box-sizing: border-box;
}
}
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
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# background-image
background-image 属性用于为一个元素设置一个或者多个背景图像。
在绘制时，图像以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
然后元素的边框 border 会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip 和 background-origin 中定义。
如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。
background-image:
linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
url('https://mdn.mozillademos.org/files/7693/catfront.png');
1
2
3
2
3