mask-image 灰色hover时是彩色, linear-gradient 线性渐变创建图像

1.svg做背景,默认是灰色,hover时是彩色:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.logo {
display:inline-block;
width: 66px;
height: 25px;
background-color: gray;
mask-image: url(../images/logo.svg);
mask-position: center bottom;
mask-repeat: no-repeat;
}
&:hover,
&:focus {
.logo {
background-color: #00297a;
}
}

半透明背景:



我只是文字


1
2
3
4
5
.form {
border-radius: 20px;
overflow: hidden;
background: linear-gradient(rgba(84,74,90,0.8),rgba(84,74,90,0.8)),url(/img/flex.png) no-repeat 50% 50%/cover;
}

图片圆形加右边:after的底边:

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
30
31
32
33
.faculty-img a {
display: inline-block;
position: relative;
z-index: 1;
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white,black);
}
.faculty-img a img {
transition: all 0.4s ease-out;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
}
.faculty-img::after {
position: absolute;
top: 2%;
content: "";
display: inline-block;
width: 100%;
height: 95%;
z-index: 0;
right: -5%;
border-radius: 50%;
background-color: #9D6C98;
}

2.mask-image + linear-gradient 优雅显示文本过长

线性渐变创建图像:

下拉


1
2
mask-image: CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现,部分或完全隐藏某个元素的可见性。
linear-gradient:用线性渐变创建图像。

html dom结构

1
2
3
4
5
6
7
8
9
10
<div class="mask-image-linear-gradient">
<div class="mask-image-linear-gradient__words">
<p>线性渐变创建图像:</p>
<p style="text-align: center"><img style="max-width:100%;" src="/img/flex.png"/></p>下拉<p><br/></p>
</div>
<img v-if="isShowOpen"
:src="isOpen?'open.png':'close.png'"
class="icon icon--open-all"
@click="tapOpenAll" />
</div>

css实现方式 [ 部分 ]:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	.mask-image-linear-gradient {
// 外层div样式
&__words {
height: 150px;
overflow: hidden;
-webkit-mask-image: linear-gradient(#1a1a1a 55%, transparent);
mask-image: linear-gradient(#1a1a1a 55%, transparent);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
// 打开时候不显示mask
&.open {
mask-image: none;
-webkit-mask-image: none;
}
}

关键css:

1
2
mask-image: linear-gradient(#1a1a1a 55%, transparent);
mask-size: 100% 100%;