57

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

4

4 回答 4

75

要实现“前景图像”（无需额外的 HTML 代码），您可以使用伪元素 ( ::before/ :before)加上 CSSpointer-events。需要最后一个属性，以便用户可以“好像它不存在”实际单击该层。

这是一个示例（使用 alpha 通道为 50% 的颜色，以便您可以看到真实元素实际上可以被聚焦）。http://jsfiddle.net/JxNdT/

#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;
    }
    <div id="cont">
    Test<br>
    <input type="text" placeholder="edit">
    </div>

PS。我选择了::before伪元素，因为这自然会导致正确的定位。如果我选择::after，那么我必须添加position:relative;到真实元素 ( #cont) 和top:0;left:0;伪元素 ( ::after)。

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

于 2012-09-30T09:15:21.323 回答
3

你可以使用这个CSS

#yourImage
{
z-index: 1; 
}

笔记

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

如果你没有指定任何z-index那么1会做这项工作。

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

于 2012-09-30T08:53:17.977 回答
3

如果你需要一个白色透明的前景

这适用于像我这样正在考虑向元素添加白色透明前景以传达它被隐藏/禁用的未来访问者。您通常可以通过简单地降低opacity以下 1 来实现您的目标：

.is-hidden {
    opacity: 0.5;
}
visible
<span class="is-hidden">hidden</span>
visible

于 2016-09-27T12:51:16.100 回答
0

一个巧妙的解决方案：box-sizing + padding-left，在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
}
于 2019-10-25T12:08:29.050 回答