Html 图像覆盖图像 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1345210/
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
Image over Image CSS
提问by
I am creating a webpage and I am trying to put a png (buttons) over gif files. When the page renders, it makes the png file appear after or under the gif file. I tried using and tags but neither work. I have also tried using various CSS padding, alignments etc. but it doesn't seem to work. Is there a way (code) to get images to appear on top of images?
我正在创建一个网页，我试图在 gif 文件上放置一个 png（按钮）。当页面呈现时，它使 png 文件出现在 gif 文件之后或之下。我尝试使用和标签，但都不起作用。我也尝试过使用各种 CSS 填充、对齐等，但它似乎不起作用。有没有办法（代码）让图像出现在图像之上？
回答by rahul
Each element in a page has a particular stacking order. If you do not set them explicitly then it will be stacked in accordance to the order in DOM.
页面中的每个元素都有特定的堆叠顺序。如果您没有明确设置它们，那么它将按照 DOM 中的顺序堆叠。
You can control the stacking order by setting the property
可以通过设置属性来控制堆叠顺序
The higher the z-index value goes the higher will be the stacking order for the element.
z-index 值越高，元素的堆叠顺序就越高。
If you can set the gif image as the background of a cell then
如果您可以将 gif 图像设置为单元格的背景，那么
property will be the best one. First set the gif image as a background to the cell and place the png button in the cell and position it inside the cell.
财产将是最好的。首先将 gif 图像设置为单元格的背景并将 png 按钮放在单元格中并将其放置在单元格内。
回答by Warren Young
Use the "background-image" CSS attribute on a block-level element (<div>, <td>etc.) for the background GIF, then place the PNG buttons inside that block element.
使用块级元素（在“背景图像” CSS属性<div>，<td>用于背景GIF等），然后将该块元素内的PNG的按钮。
Like this:
像这样：
<style type="text/css">
div#withBackground {
background-image: url('bitmaps/bg-image.gif');
background-repeat: no-repeat;
}
</style>
<div id="withBackground">
<img src="bitmaps/fg-image.png" />
</div>
回答by Odif Yltsaeb
Like other people said - if you want to put images on top of another, then you need z-indexing. Just remember, that z-index only works, if nested elements have position set - absolute or relative (static should not be used for this)
就像其他人说的 - 如果你想把图像放在另一个上面，那么你需要 z-indexing。请记住，如果嵌套元素设置了位置，则 z-index 仅有效 - 绝对或相对（静态不应用于此）
回答by JSuar
General Solutions
一般解决方案
MDN is a great resource for questions like this one. The Understanding CSS z-indexarticle provides various ways to accomplish what OP's after. A few are quickly covered below.
MDN 是解决此类问题的绝佳资源。该理解CSS z-index的文章提供了多种方式来完成后什么OP的。下面快速介绍了一些。
All Examples
所有示例
This includes all six basic examples I setup.
这包括我设置的所有六个基本示例。
.clear {
clear: both;
}
.relPos {
position: relative;
}
.absPos {
position: absolute;
}
.relPos0 {
position: relative;
}
.relPos1 {
left: -154px;
top: -33px;
position: relative;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.relPos2 {
position: relative;
right: 150px;
}
.bgImg {
background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
width: 150px;
height: 84px;
}
.bgImg2 {
background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
width: 84px;
height: 84px;
}
.relPos3 {
position: relative;
}
.relPos4 {
left: -154px;
top: -33px;
position: relative;
}
.relPos5 {
left: 154px;
top: 25px;
position: relative;
}
.relPos6 {
position: relative;
}
.relPos7 {
left: 154px;
top: 25px;
position: relative;
z-index: 2;
}<h1>EX0 - Default</h1>
<p>Two images and no CSS.</p>
<img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1>EX1 - Position: Absolute & Relative</h1>
<p>Making one image's position absolute and the other relative will create an overlay.</p>
<img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1 style="padding-top:1em;">EX2 - Position: Relative & Relative</h1>
<p>Both images can have a relative position but then <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> will need to be utilized.</p>
<img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1>EX3 - Using Position & Float</h1>
<p>Float can be used with relative position, but <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> will need to be utilized.</p>
<div style="width:200px;">
<div class="floatRight relPos2">
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>
<div class="floatLeft">
<img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
</div>
</div>
<h1 class="clear">EX4 - Background-image</h1>
<h2>With div</h2>
<p>Another easy way to overlay images is to make the back image a background image using the CSS property <code>background</code>. Anything inside the element with the background image will appear on top.</p>
<div class="bgImg">
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>
<h2>img Alone</h2>
<p>Instead of applying the background image on another element, it could be applied to the overlay image itself. The problem here is that the png overlay would need to be the same size as the background image. That's how you would position it over the jpg.
Via <a href="http://www.cssmojo.com/png_overlay_with_no_extra_markup/" target="_blank">CSSMojo.com</a>.</p>
<img class="bgImg2" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" alt="" />
<h1>EX5 - Position & z-index</h1>
<p>Order matters if z-index is not employed. EX6 is an example wher the ordering is correct and only top and left are used for the positioning.</p>
<img class="relPos3" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos4" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1>EX6 - Position & z-index</h1>
<p>If both objects are relative, order will matter when using the <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> properties. Reordering the elements (see EX5) or using larger <code>z-index</code> values can resolve this issue.</p>
<img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />Instead of posting all the examples below, I am only including what I think will easily solve the OP's problem.
我没有发布下面的所有示例，而是仅包含我认为可以轻松解决 OP 问题的内容。
EX1 - Position: Absolute & Relative
EX1 - 位置：绝对和相对
Making one image's position absoluteand the other relativewill create an overlay.
使一个图像的位置absolute和另一个relative将创建一个覆盖。
.relPos {
position: relative;
}
.absPos {
position: absolute;
}<img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />EX2 - Position: Relative & Relative
EX2 - 位置：相对和相对
Both images can have a relative position but then top, right, bottom, or leftproperties will need to be utilized.
这两个图像可以有一个相对位置，但是然后top，right，bottom，或left特性将需要被利用。
.relPos0 {
position: relative;
}
.relPos1 {
left: -154px;
top: -33px;
position: relative;
}<img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />EX4 - Background-image using a div
EX4 - 使用 div 的背景图像
Another easy way to overlay images is to make the back image a background image using the CSS property background. Anything
inside the element with the background image will appear on top.
覆盖图像的另一种简单方法是使用 CSS 属性将背景图像设为背景图像background。带有背景图像的元素内的任何内容都将显示在顶部。
.bgImg {
background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
width: 150px;
height: 84px;
}<div class="bgImg">
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>EX6 - Position & z-index
EX6 - 位置和 z-index
If both objects are relative, order will matter when using the top, right, bottom, or leftproperties. Reordering the elements (see EX5) or using larger z-indexvalues can
resolve this issue.
如果两个对象都是相对的，为了将使用的时候没关系top，right，bottom，或left性质。重新排序元素（见 EX5）或使用更大的z-index值可以解决这个问题。
.relPos5 {
left: 154px;
top: 25px;
position: relative;
}
.relPos6 {
position: relative;
}
.relPos7 {
left: 154px;
top: 25px;
position: relative;
z-index: 2;
}<img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />Alternatives
备择方案
CSS-Tricks covers a layering technique with CSS3 utilizing the backgroundproperty only.
CSS-Tricks 涵盖了 CSS3 的分层技术，background仅利用该属性。
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
via http://css-tricks.com/stacking-order-of-multiple-backgrounds/
通过http://css-tricks.com/stacking-order-of-multiple-backgrounds/
