logo标签列表

图像覆盖在图像上的CSS效果

htmlcssimage
11

我正在创建一个网页，试图将png（按钮）覆盖在gif文件上。 当页面呈现时，它会使png文件出现在gif文件之后或之下。 我尝试使用<div>和<span>标签，但都不起作用。我还尝试使用各种CSS填充、对齐等，但似乎没有效果。 有没有一种方法（代码）可以让图片显示在另一张图片的上方？

4个回答
5
每个页面元素都有特定的堆叠顺序。如果您没有明确设置它们，那么它们将按照DOM中的顺序堆叠。
您可以通过设置属性z-Index来控制堆叠顺序。
z-index值越高，元素的堆叠顺序就越高。
如果您可以将gif图像设置为单元格的背景，则background-image属性将是最好的选择。首先将gif图像设置为单元格的背景，然后将png按钮放置在单元格中，并将其定位在单元格内部。
"z-index" 中的 "z" 指的是穿过屏幕的三维 "轴"，这就是为什么它被称为 z-index。 - jtbandes
3

在块级元素（例如<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>
1

就像其他人所说的 - 如果你想把图片放在另一张图片上面，那么你需要使用z-index。只要记住，z-index只有在嵌套元素设置了绝对或相对位置时才有效（不应该使用静态位置）。

0

通用解决方案

MDN是处理此类问题的绝佳资源。 理解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" />

不必贴出所有的示例，我只包含了我认为可以轻松解决问题的部分。

示例1 - 位置：绝对和相对

将一个图像的位置设置为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/实现

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接