Html 在 css 中是否有与 background-image 等效的前景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12659953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a foreground equivalent to background-image in css?
提问by Himmators
I want to add some shine to an element on webpage. I would prefer if I don't have to add additional html to the page. I want the image to appear in front of the element rather than behind. What's the best way to do this?
我想为网页上的元素添加一些亮点。如果我不必向页面添加额外的 html，我会更喜欢。我希望图像出现在元素的前面而不是后面。做到这一点的最佳方法是什么？
回答by Rob W
To achieve a "foreground image" without extra HTML code, you can use a pseudo-element (::before/ :before) plus the CSS pointer-events. The last property is needed so that the user can actually click through the layer "as if it did not exists".
要在没有额外 HTML 代码的情况下实现“前景图像”，您可以使用伪元素 ( ::before/ :before)加上 CSSpointer-events。需要最后一个属性，以便用户可以实际单击图层“就好像它不存在一样”。
Here's an example (using a color whose alpha channel is 50% so that you can see that the real elements can actually be focused): http://jsfiddle.net/JxNdT/
这是一个示例（使用 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. I picked the ::beforepseudo-element, because that naturally leads to the correct positioning. If I pick ::after, then I have to add position:relative;to the real element (#cont), and top:0;left:0;to the pseudo-element (::after).
附注。我选择了::before伪元素，因为这自然会导致正确的定位。如果我选择::after，那么我必须添加position:relative;到真实元素 ( #cont) 和top:0;left:0;伪元素 ( ::after) 中。
PPS. To get the foreground effect on elements without a fixed size, an additional element is needed. This wrapper element requires the position:relative;display:inline-block;styles. Set the widthand heightof the pseudo-element to 100%, and the pseudo-element will stretch to the width and height of the wrapper element. Demo: http://jsfiddle.net/JxNdT/1/.
聚苯乙烯。为了在没有固定大小的元素上获得前景效果，需要一个额外的元素。此包装元素需要position:relative;display:inline-block;样式。将伪元素的widthand设置height为100%，伪元素将拉伸到包装元素的宽度和高度。演示：http: //jsfiddle.net/JxNdT/1/。
回答by Anirudha
You can use this css
你可以使用这个css
#yourImage
{
z-index: 1;
}
NOTE
笔记
Set the z-indexto index greater the the z-indexof the element over which you are putting the image.
将z-index要z-index放置图像的元素的索引设置为更大。
If you have not specified any z-indexthen 1would do the work.
如果你没有指定任何，z-index那么1就可以完成这项工作。
You can also set z-indexto -1,in that case the image would always be at background!
您也可以设置z-index为-1，在这种情况下，图像将始终位于background！
回答by Bart S
If you need a white-transparent foreground
如果你需要一个白色透明的前景
This is for future visitors like me who are considering adding a white-transparent foreground to an element to communicate that it's hidden / disabled for instance. You can often achieve your goal by simply lowering the opacitybelow 1:
这适用于像我这样的未来访问者，他们正在考虑向元素添加白色透明的前景，以传达它已隐藏/禁用的信息。您通常可以通过简单地降低opacity以下 1来实现您的目标：
.is-hidden {
opacity: 0.5;
}visible
<span class="is-hidden">hidden</span>
visible回答by nicolallias
A neat solution: box-sizing + padding-left, see more at css-tricks
一个简洁的解决方案：box-sizing + padding-left，在css-tricks 上查看更多
Somewhere in your HTML:
在您的 HTML 中的某处：
<img id="test_replacement" src="test.png" alt="test" />
The CSS for replacing the image (on hovering)
用于替换图像的 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
}
