有一个前景等同于背景图像在CSS？
我想添加一些闪耀的网页上的元素。 我宁愿如果我不必添加额外的HTML到页面。 我希望图像出现在元素的前面而不是后面。 什么是最好的方法来做到这一点？
要获得没有额外HTML代码的“前景图像”，可以使用伪元素（ ::before / :before ） 加上CSS pointer-events 。 最后一个属性是需要的，以便用户可以实际点击图层“好像它不存在”。
下面是一个例子（使用alpha通道为50％的颜色，以便您可以看到真正的元素实际上可以被聚焦）： http : //jsfiddle.net/JxNdT/
<div id="cont"> Test<br> <input type="text" placeholder="edit"> </div>
#cont { width: 200px; height: 200px; border: 1px solid #aaa; /*To show the boundaries of the element*/ } #cont:before { position: absolute; content: ''; background: rgba(0,0,0, 0.5); /*partially transparent image*/ width: 200px; height: 200px; pointer-events: none; }
PS。 我select了::before伪元素，因为这自然导致了正确的定位。 如果我select::after ，则必须添加position:relative; （ #cont ）和top:0;left:0; 到伪元素（ ::after ）。
PPS。 为了在没有固定大小的元素上获得前景效果 ，需要额外的元素。 这个包装器元素需要position:relative;display:inline-block; 样式。 将伪元素的width和height设置为100% ，伪元素将拉伸到包装元素的宽度和高度。 演示： http : //jsfiddle.net/JxNdT/1/ 。
你可以使用这个CSS
#yourImage { z-index: 1; }
注意
设置z-index来索引放置图像的元素的z-index 。
如果你没有指定任何z-index那么1将做这项工作。
您也可以将z-index设置为-1 ，在这种情况下，图像将始终处于background ！
如果你需要一个白色透明的前景
这对于像我这样的未来访问者来说，他们正在考虑为元素添加一个白色透明的前景来传达它的隐藏/禁用状态。 通过简单地将opacity降低到1：
.is-hidden { opacity: 0.5; }
visible <span class="is-hidden">hidden</span> visible
