图像 CSS 上的图像

Question

我正在创建一个网页，并尝试在 gif 文件上放置一个 png（按钮）。 当页面呈现时，它使 png 文件出现在 gif 文件之后或之下。 我尝试使用和标签，但都不起作用。我也尝试过使用各种 CSS 填充、对齐等，但它似乎不起作用。 有没有办法（代码）让图像出现在图像之上？

Answer 1

页面中的每个元素都有特定的堆叠顺序。如果不显式设置，则会按照 DOM 中的顺序堆叠。

可以通过设置属性来控制堆叠顺序

z-Index

z-index 值越高，元素的堆叠顺序就越高。

如果你可以将gif图像设置为单元格的背景，那么

background-image

财产将是最好的。首先将 gif 图片设置为单元格的背景，并将 png 按钮放置在单元格中，并将其定位在单元格内。

Answer 2

在块级元素（<div>、<td> 等）上使用“background-image”CSS 属性作为背景 GIF，然后将 PNG 按钮放在该块元素内。

像这样：

<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>

Answer 3

就像其他人所说的 - 如果您想将图像放在另一个之上，那么您需要 z-indexing。请记住，z-index 仅适用于嵌套元素的位置设置 - 绝对或相对（静态不应用于此）

Answer 4

一般解决方案

MDN 是解决此类问题的绝佳资源。 Understanding CSS z-index 文章提供了各种方法来完成 OP 的目标。下面将快速介绍其中的一些内容。

所有示例

这包括我设置的所有六个基本示例。

.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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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" />

我没有发布下面的所有示例，而是仅包括我认为可以轻松解决 OP 问题的内容。

EX1 - 位置：绝对和相对

使一个图像的位置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 - 位置：相对和相对

两个图像可以有一个相对位置，但需要使用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 - 使用 div 的背景图片

另一种叠加图像的简单方法是使用 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 - 位置和 z-index

如果两个对象都是相对的，那么在使用 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" />

替代方案

CSS-Tricks 涵盖了一种仅利用 background 属性的 CSS3 分层技术。

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; */

通过http://css-tricks.com/stacking-order-of-multiple-backgrounds/