图像CSS上的图像

Question

我正在创建一个网页，我正在尝试将一个png（按钮）放在gif文件上。 当页面呈现时，它使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之后的操作。下面将简要介绍一些。

所有示例

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

EX1 - 位置：绝对＆amp;相对

制作一张图片的位置absolute和另一张relative会创建一个叠加层。

＆＃13;

＆＃13;

.relPos {
    position: relative;
}
.absPos {
    position: absolute;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

EX2 - 位置：相对＆amp;相对

两个图片都可以具有相对位置，但需要使用top，right，bottom或left属性。

＆＃13;

＆＃13;

.relPos0 {
    position: relative;
}
.relPos1 {
	left: -154px;
	top: -33px;
    position: relative;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

EX4 - 使用div的背景图像

叠加图像的另一种简单方法是使用CSS属性background使背面图像成为背景图像。什么 带有背景图片的元素内部将显示在顶部。

＆＃13;

＆＃13;

.bgImg {
    background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
    width: 150px;
    height: 84px;
}

＆＃13;

<div class="bgImg">
    <img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>

＆＃13;

＆＃13;

＆＃13;

EX6 - 位置＆amp;的z-index

如果两个对象都是相对的，则在使用top，right，bottom或left属性时，顺序会很重要。重新排序元素（请参阅EX5）或使用较大的z-index值可以 解决这个问题。

＆＃13;

＆＃13;

.relPos5 {
	left: 154px;
	top: 25px;
    position: relative;
}
.relPos6 {
    position: relative;
}
.relPos7 {
	left: 154px;
	top: 25px;
    position: relative;
	z-index: 2;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

替代

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/