html - 具有透明颜色覆盖的背景图像上的 mask 元素

Question

这是我努力实现的例子。 body 有背景图像。图像上方是不透明层。然后我得到了元素列表，应该屏蔽哪些背景以使其完全透明。

CSS甚至可以吗？
演示失败:link

HTML 结构:

<div id="opacity">
    <ul>
        <li>
            <div class="mask">
                <a class="fancybox" rel="group" href="#">
                    <img src="name.png" class="thumb" />
                </a>
            </div>
        </li>
        <li>
            <div class="mask">
                <a class="fancybox" rel="group" href="#">
                    <img src="name.png" class="thumb" />
                </a>
            </div>
        </li>
    </ul>  
</div>

Answer 1

我知道你可以伪造它的方法是在 mask 容器上设置图像并添加属性

 background-attachment: fixed;

像这样:

.mask {
   background-image: url(http://justbeecosmetics.com/img/headImage.jpg); 
   background-attachment: fixed;
   background-size: cover;
}

检查更新 Demo

来自 W3

The background-attachment property specifies whether a background image is fixed with regard to the viewport or scrolls along with the containing block.

默认值是scroll然后如果你将它设置为fixed

The background image does not scrolls with the element.

附加到视口(viewport)。