css - 使用 css 进行动态遮罩

Question

我想要一个从两侧淡出 16px 的面具。

所以喜欢：16px fading in - white - 16px fading out。

我得到的是：DEMO

-webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white);
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-size: 16px 40px, 16px 40px;
-webkit-mask-position: 0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box;

唯一的问题是它在中间不可见。我怎样才能解决这个问题？

Answer 1

尝试这个。

这是演示CODEPEN的代码笔

我还附上了代码，如果您有任何疑问，请告诉我。

html

<div class="div">
    <span>Example Program</span>
  </div>

CSS

.div {
  box-shadow: 0 16px 0px 0px white, 0 -16px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
  -webkit-mask-position: 0 0, 100% 0;
-webkit-mask-size: 16px 40px, 16px 40px;
width: 30%;
height: 40px;
margin: 50px;
background: red;
}

span {
  display: block;
background: rgb(255, 255, 255);
height: 40px;
}

Answer 2

一种选择是添加覆盖整个表面的第三个渐变（实际上是均匀的白色），并用于-webkit-mask-composite: copy确保其他两个渐变替换侧面的部分：

  -webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent, white), linear-gradient(to right, white, white);
  -webkit-mask-composite: copy;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-size: 16px 40px, 16px 40px, 100% 100%;
  -webkit-mask-position: 0 0, 100% 0, 0 0;
  -webkit-mask-origin: padding-box, padding-box, padding-box;

演示：http ://codepen.io/anon/pen/crEyL

请注意，当然，所有这些都只适用于 WebKit 浏览器。

Answer 3

这成功了。相当hacky的解决方案。

-webkit-mask-image: linear-gradient(white, white),linear-gradient(to right, white, transparent), linear-gradient(to left, white, transparent);
-webkit-mask-repeat: repeat,no-repeat, no-repeat;
-webkit-mask-size: 100% 100%,16px 100%, 16px 100%;
-webkit-mask-position: 0 0,0 0, 100% 0;
-webkit-mask-origin: padding-box, padding-box, padding-box;
-webkit-mask-composite: source-out;

解决方案演示