如何为 div 制作固定的网络工具包掩码

Question

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

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

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

所以想到了使用 webkit-mask 掩码切割div-block id="p2"，并修复相对于页面的网络工具包掩码。有关 gif 动画的更多详细信息：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块（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 支持。（请参阅 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

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

我也未能找到替代破碎的建议

-网络套件面具附件：固定;