Question

假设我们有两个div叠加的块，它们之间的唯一区别是在下面的块中对内容div应用的效果假定为黑白滤镜-webkit-filter: grayscale (100%);

如果div-block p2按高度减小并同步滚动，那么我们将实现黑白色彩内容的过渡效果。

但是，我尝试编写的网站是专为移动设备而设计的，并且iOS在获取动态位置滚动方面存在问题。或者可以使用iscroll，但工作速度很慢......

因此，想法是使用webkit-mask mask剪切div-block id =“p2”并修复相对于页面的webkitmask。有关gif-animation的更多细节： http://outsins.com/mask.gif

<div id="scroll" style="-webkit-overflow-crolling:touch;left:200px;width:500px;height:500px;">

<div id="p1" style="position:absolute;width:500px;height:1000px;z-index:1;-webkit-filter: grayscale(100%);">
some text
</div>

<div id="p2" style="position:absolute;width:500px;height:1000px;z-index:2; color: blue;-webkit-mask:url(heartmask.png) no-repeat center center;-webkit-mask-attachment: fixed;">
some text
</div>

</div>

我在公共容器中放置了两个叠加块，并添加了-webkit-overflow-scrolling：touch。现在滚动两个div-block（p1和p2）同时移动。在顶层（id：p2），我添加了webkitmask -webkit-mask: url (heartmask.png)并修复它：-webkit-mask-attachment: fixed; 因此，内容应该被假定不应移动的面具剪掉。

但是-webkit-mask-attachment: fixed;不起作用，并且蒙版与整个页面一起移动 http://outsins.com/mask2.gif

我没有找到-webkit-mask-attachment: fixed;

的任何示例

我觉得我错了。

我的错误在哪里？我该如何解决这个问题？

抱歉英语不好......

谢谢

Answer 1

大多数浏览器都不支持

-webkit-mask-attachment: fixed;。它仅由Chome和Safari支持。（见browser compatibility in MDN）。

尝试将position:fixed用于div#p2：

<div id="p2" style="position:fixed;"></div>

Answer 2

尝试使用svg掩码。有关详细信息，请参阅此处：http://css-tricks.com/clipping-masking-css/

<img class="clip-svg" src="harry.jpg" alt="Harry Potter">

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="40" />
      <circle cx="60" cy="60" r="40" />
    </clipPath>
  </defs>
</svg>

.clip-svg {
  clip-path: url(#myClip);
}

Answer 3

如果你有一个坚实的背景，你可以简单地将面具添加到上面固定的p1 div，p2内容应该看起来受影响，给人的印象是面具被修复并应用于p2。本网站：https://ajy.co/web/fade-to-background-image-in-css/讨论淡入背景图像的副本。我想我知道你在寻找什么，因为我在寻找同样的东西。不幸的是，我的设计有很多透明层，所以简单地应用重复的图像和淡化它不是我的选择。希望这有帮助。

我也无法找到

的破坏建议的替代方案

-webkit-mask-attachment：fixed;

如何为div修复webkit-mask？

3 个答案: