在透明颜色覆盖的背景图像上的面具元素

Question

这是我试图实现的例子。身体有背景图像。在图像上是不透明层。然后我得到了元素列表，哪个背景应该被屏蔽，以便它完全透明。

CSS甚至可以吗？ DEMO失败：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

  

background-attachment属性指定背景图像是相对于视口固定还是与包含块一起滚动。

默认值为scroll，如果您将其设置为fixed

  

背景图片不会随元素滚动。

附加到视口。

Answer 2

如何使用带有rgba（）值的边框来提供透明度：

<强> DEMO

CSS：

body {
    background-image: url(http://justbeecosmetics.com/img/headImage.jpg); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

#opacity {
    position: absolute;
    top: 0;left:0;
    width: 100%;height: 100%;
}

ul li {
    list-style-type:none;
    float:left;
    margin:10px;
    position:relative;
}
ul li:after{
    content:'';
    position:absolute;
    top:-9999px;
    left:-9999px;
    width:100%; height:100%;
    border-color: rgba(0,0,0,.5);
    border-left-width: 9999px;
    border-top-width:9999px;
    border-bottom-width:9999px;
    border-right-width:20px;
    border-style:solid;
}
ul li:nth-child(2):after{
    left:0px;
    border-left-width: 0;
    border-top-width:9999px;
    border-bottom-width:9999px;
    border-right-width:9999px;
}
.mask {
    background:transparent;
    padding:50px;
}
.thumb {
    width:80px;height:80px;
}