如何解决使用CSS遮罩仅遮罩元素的一部分
我有一个元素,仅在元素末尾要遮罩。我设法编写了一些代码来掩盖元素的结尾,但是元素的其余部分现在也被掩盖了。我想更改遮罩,以使遮罩左侧的所有元素仍然可见。
<div>
<form (ngSubmit)="onSubmit()" [formGroup]="dynaForm">
<div *ngFor="let question of questions">
<app-view-question
[question]="question"
[form]="dynaForm"
></app-view-question>
</div>
<div class="form-row">
<button type="submit" [disabled]="!dynaForm.valid">Save</button>
</div>
</form>
<div *ngIf="payLoad" class="form-row">
<strong>Saved the following values</strong><br />{{ payLoad }}
</div>
</div>
.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;
}
解决方法
您需要多个口罩
.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,transparent) right/30px 100% no-repeat,linear-gradient(black 0 0);
-webkit-mask-composite:destination-out;
mask-composite:exclude;
}
<div class="masked"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。