使用CSS遮罩仅遮盖元素的一部分

Question

使用CSS遮罩仅遮盖元素的一部分

3

我有一个元素，我只想在元素的末尾进行遮罩。我设法编写了一些代码来对元素的末尾进行遮罩，但是现在元素的其余部分也被遮罩了。我希望更改遮罩，以便仍然可以看到遮罩左侧的元素。

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  mask-image: linear-gradient(to right, black, transparent);
  mask-size: 30px;
  mask-repeat: no-repeat;
  mask-position: right;
}

<div class="masked"></div>

- Jon Koops

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

你需要多个掩码。

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: 
    linear-gradient(black 0 0)                    left,
    linear-gradient(to right, black, transparent) right;
  -webkit-mask-size:
    calc(100% - 30px) 100%,
    30px              100%;
  -webkit-mask-repeat: no-repeat;
}

<div class="masked"></div>

或者您可以像下面这样调整一个口罩:

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: linear-gradient(to right, black calc(100% - 30px), transparent);
}

<div class="masked"></div>

另一种语法：

.masked {
  width: 300px;
  height: 30px;
  background-color: hotpink;
  -webkit-mask: 
    linear-gradient(to left , black, transparent) right/30px 100% no-repeat,
    linear-gradient(black 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

<div class="masked"></div>