css动态掩蔽

我想要一个两面都淡出16像素的面具

比如：

16px淡入-淡出-白色-16px淡出

我得到的是：

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

唯一的问题是它在中间不可见。如何修复此问题？

试试这个

这是演示用的代码笔

此外，我已附上代码，如果您有任何疑问，请告诉我

html

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

---

一个选项是添加覆盖整个表面的第三个渐变（实际上是均匀的白色），并使用

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

演示：

---

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

这就成功了。相当骇人的解决方案

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

---

这是一个更好的解决方案：）

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