在css中是否存在等同于background-image的前景？

Question

我想为网页上的元素添加一些亮点.如果我不必在页面中添加额外的html,我更愿意.我希望图像出现在元素的前面而不是后面.最好的方法是什么？

Answer 1

要获得没有额外HTML代码的"前景图像",可以使用伪元素(::before/ :before)和CSSpointer-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.我选择了::before伪元素,因为这自然会导致正确的定位.如果我选择::after,那么我必须添加position:relative;到真实的element(#cont)和top:0;left:0;伪元素(::after).

PPS.要在没有固定大小的元素上获得前景效果,需要一个额外的元素.这个包装元素需要position:relative;display:inline-block;样式.设置width和height伪元件的100%,和伪元件将伸展到包装元素的宽度和高度.演示:http://jsfiddle.net/JxNdT/1/.