我正在创建一个网页,试图将png(按钮)覆盖在gif文件上。 当页面呈现时,它会使png文件出现在gif文件之后或之下。 我尝试使用<div>和<span>标签,但都不起作用。我还尝试使用各种CSS填充、对齐等,但似乎没有效果。 有没有一种方法(代码)可以让图片显示在另一张图片的上方?
在块级元素(例如<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>
就像其他人所说的 - 如果你想把图片放在另一张图片上面,那么你需要使用z-index。只要记住,z-index只有在嵌套元素设置了绝对或相对位置时才有效(不应该使用静态位置)。
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 & 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" />
不必贴出所有的示例,我只包含了我认为可以轻松解决问题的部分。
将一个图像的位置设置为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" />
两个图像都可以有相对位置,但需要使用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" />
另一种简单的叠加图像的方法是使用 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>
如果两个对象都是相对的,使用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/实现