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%;