Question

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

Answer 1

要获得没有额外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。我选择了::before伪元素，因为这自然会导致正确的定位。如果我选择::after，那么我必须将position:relative;添加到真实元素（#cont），并将top:0;left:0;添加到伪元素（::after）。

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

Answer 2

如果您需要白色透明的前景

这适用于像我这样的未来访问者，他们正在考虑为元素添加白色透明的前景，以便与其进行隐藏/禁用通信。您通常只需降低opacity低于1：

即可实现目标

＆＃13;

.is-hidden {
    opacity: 0.5;
}

＆＃13;

visible
<span class="is-hidden">hidden</span>
visible

＆＃13;

Answer 3

您可以使用此css

#yourImage
{
z-index: 1; 
}

注意

将z-index设置为索引大于您放置图像的元素的z-index。

如果您未指定任何z-index，那么1就可以完成工作。

您也可以将z-index设置为-1，在这种情况下，图片将始终位于background！

Answer 4

一个整洁的解决方案：框大小+向左填充，请参见css-tricks

HTML中的某处：

<img id="test_replacement" src="test.png" alt="test" />

用于替换图片（悬停时）的CSS

#test_replacement {
    width: 200px; //must be the size of your image (and the replacement one)
    height: 200px; //idem
    display: block;
}
#test_replacement:hover {
    box-sizing: border-box;
    background-image: url('somewhere/other_image.png');
    padding-left: 200px; //at least the size of the width
}

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

4 个答案: