Html 如何在不影响页面布局的情况下将透明图像放在 div 上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5074393/
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
How to put a transparent image over a div without affecting the layout of the page?
提问by funk-shun
How do I put a transparent png image over a DIV without it affect anything else in the HTML document? I would do position absolute because it takes it out of the "normal flow of the document" but I have the whole website centered using "margin-left: auto;" and "margin-right: auto;"
如何将透明的 png 图像放在 DIV 上而不影响 HTML 文档中的其他任何内容？我会做绝对位置，因为它脱离了“文档的正常流程”，但我使用“margin-left: auto;”将整个网站居中。和“边距：自动；”
回答by Chris
if you apply position: relativeto the divyou want to cover then position: absoluteon the image will be calculated relative to the covered div rather than the whole page, if it is a child element. i.e.
如果你申请position: relative到div你想要然后覆盖position: absolute在图像上会相对于盖格，而不是整个页面计算，如果它是一个子元素。IE
<div id="tobecoverd">
<p>your content...</p>
<img src="./img/transparent.png" class="cover" />
</div>
div#tobecovered{
position: relative;
}
div#tobecovered img.cover{
position: absolute;
/* position in top left of #tobecovered */
top: 0; /* top of #tobecovered */
left: 0; /* left of #tobecovered */
}
回答by Hussein
Here's how it works. The example shows a transparent image absolutely positioned over another image, creating a mask.
这是它的工作原理。该示例显示了一个透明图像绝对定位在另一个图像上，从而创建了一个蒙版。
Check working example at http://jsfiddle.net/39VG9/1/
在http://jsfiddle.net/39VG9/1/检查工作示例
回答by ismaestro
Other solution is to use after like this:
其他解决方案是这样使用后：
.image:after{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url(https://i.imgur.com/DDdKwlk.png) no-repeat 0 0;
background-size: cover;
}
:)
:)
回答by wizztjh
I would say float is a good way to do this by not block other things , with absolute , some thing will hide under it or show above it base on the z-index.
我会说 float 是一个很好的方法，它不阻塞其他东西，绝对，一些东西会隐藏在它下面或基于 z-index 显示在它上面。
Thisis a good tutorial on css positioning , take a look , you might found what you looking for
这是一个很好的css定位教程，看一看，你可能会找到你想要的
回答by Harold Chan
I think position:absoluteis more appropriate for normal usages as it follows the scroll.
我认为position:absolute更适合正常使用，因为它遵循滚动。
