背景图像上的蒙版元素，带有透明颜色叠加答案

【问题标题】：mask element on background image with transparent color overlay背景图像上的蒙版元素，带有透明颜色叠加
【发布时间】：2014-11-10 04:27:15
【问题描述】：

这是我尝试实现的示例。身体有背景图像。图像上方是不透明层。然后我得到了元素列表，其中的背景应该被遮盖以使其完全透明。

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>

【问题讨论】：

是的，是的。但是透明父级的所有子级也是透明的。所以你必须使用position:relative 或position:absolute 将 non-transparent 元素推入其中。
我会用z-index:1 放置背景，用z-index:0 放置框架，并根据背景和框架的总和计算出框架上的不透明度。或者看看@Danko。

标签： html css background transparency transparent

【解决方案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 属性指定背景图像是相对于视口固定还是随包含块滚动。

默认值为scrollthen如果你设置为fixed

背景图片不随元素滚动。

附加到视口。

【讨论】：

有一个问题。如果您使结果窗口非常小，您可以滚动。然后你就看到了问题。 %)P
@DOCASAREL 你是对的，我猜你也可以制作一个带有背景的容器，而不是把它附加到身体上......这一切都取决于你想要的容器的使用和行为检查这个@ 987654322@
解决这个问题的有趣方法......出于好奇，这种方法是否有合理的解释？就我而言，这就够了，谢谢先生！
@bojar 检查更新...您也可以使用该属性来设置您想要的确切行为

【解决方案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;
}

【讨论】：

+1 也不错的解决方案...这里的问题是，如果您以后想添加更多元素，则需要重新计算所有内容。