html – 背景图像上的掩码元素与透明颜色覆盖

概述这是我试图实现的例子.身体有背景图像.在图像上是不透明层.然后我得到了元素列表,哪个背景应该被屏蔽,以便它是完全透明的. 它甚至可以用CSS吗？ DEMO失败：link HTML结构： <div id="opacity"> <ul> <li> <div class="mask"> <a class="fancybox" 这是我试图实现的例子.身体有背景图像.在图像上是不透明层.然后我得到了元素列表,哪个背景应该被屏蔽,以便它是完全透明的.

它甚至可以用CSS吗？
DEMO失败：link

HTML结构：

<div ID="opacity">    <ul>        <li>            <div >                <a  rel="group" href="#">                    <img src="name.png"  />                </a>            </div>        </li>        <li>            <div >                <a  rel="group" href="#">                    <img src="name.png"  />                </a>            </div>        </li>    </ul>  </div>

解决方法 我知道你可以假装的方法是在面具容器上设置该图像,同时添加属性

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.

如果将其设置为fixed,则默认值为scrollthen

The background image does not scrolls with the element.

附加到视口.

总结

以上是内存溢出为你收集整理的html – 背景图像上的掩码元素与透明颜色覆盖全部内容，希望文章能够帮你解决html – 背景图像上的掩码元素与透明颜色覆盖所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。