Html 将背景图像带到前台。可能与否？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7738807/
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
Bring background-image to frontground. Possible or not?
提问by sticksu
I really need to get the background picture in front of another picture and I can't find a way to do it without using absolute positioning.
我真的需要将背景图片放在另一张图片的前面，我找不到不使用绝对定位的方法。
<div><?php get_avatar($x, 56); ?></div>
get_avatar displays an image. So the HTML looks like:
get_avatar 显示图像。所以 HTML 看起来像：
<div><img src="whatever"></div>
A little help anyone?
一点帮助任何人？
回答by sandeep
you can use css multiple backgroundproperty
您可以使用 cssmultiple background属性
check this http://www.css3.info/preview/multiple-backgrounds/
检查这个 http://www.css3.info/preview/multiple-backgrounds/
or
或者
Edit:
编辑：
you can give your another pic z-index in minus like this:
你可以像这样给你的另一个图片 z-index 减去：
div{
background:yellow;
position:relative;
}
img{
position:relative;
z-index:-1
}
<div>
<img alt="" src="http://dummyimage.com/200x200/000/45454&text=images">
</div>
check the example http://jsfiddle.net/sandeep/5vpG7/
回答by samir chauhan
You can use the css z-index property.
您可以使用 css z-index 属性。
Set z-index:999;
设置 z-index:999;
回答by Spudley
Your code (with a background image style added for clarity):
您的代码（为了清晰起见，添加了背景图像样式）：
<div style='background-image:url(something.jpg);'><img src="whatever.jpg"></div>
In order to make the background image show instead of the foreground image, the easiest solution is simply to make the <img>invisible.
为了让背景图像显示而不是前景图像，最简单的解决方案就是使<img>不可见。
Two ways to do this using CSS:
使用 CSS 执行此操作的两种方法：
Set it to
visibility:hidden;Set it to
opacity:1;
将其设置为
visibility:hidden;将其设置为
opacity:1;
The first solution is the best, as it will work in all browsers.
第一个解决方案是最好的，因为它适用于所有浏览器。
Changing the opacity via Javascript would have the benefit of allowing you to do a fade effect, but expect problems with IE if you do that.
通过 Javascript 更改不透明度将有利于您实现淡入淡出效果，但如果您这样做，IE 可能会出现问题。
Hope that helps.
希望有帮助。
