Question

我有一个元素，仅在元素末尾要遮罩。我设法编写了一些代码来掩盖元素的结尾，但是元素的其余部分现在也被掩盖了。我想更改遮罩，以使遮罩左侧的所有元素仍然可见。

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

Answer 1

您需要多个口罩

.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>

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

1 个答案: