Я создаю веб-страницу, и я пытаюсь поместить png (кнопки) поверх файлов gif. Когда страница отображается, она создает файл png после или под gif файлом. Я пробовал использовать и теги, но не работал. Я также пытался использовать различные дополнения, выравнивания и т.д., Но, похоже, это не работает. Есть ли способ (код), чтобы изображения отображались поверх изображений?
Изображение над изображением CSS
Ответ 1
Каждый элемент страницы имеет определенный порядок укладки. Если вы не укажете их явно, то они будут сложены в соответствии с порядком в DOM.
Вы можете управлять порядком укладки, установив свойство
Чем выше значение z-index, тем выше будет порядок укладки элемента.
Если вы можете установить gif-изображение в качестве фона ячейки, то
свойство будет лучшим. Сначала установите gif-изображение в качестве фона для ячейки и поместите кнопку png в ячейку и поместите ее внутри ячейки.
Ответ 2
Используйте атрибут CSS "background-image" на элементе уровня блока (<div>, <td> и т.д.) для фонового 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>
Ответ 3
Как и другие люди, если вы хотите поместить изображения поверх другого, вам нужно z-индексирование. Просто помните, что z-index работает только в том случае, если вложенные элементы имеют позиционное множество - абсолютное или относительное (статический не должен использоваться для этого)
Ответ 4
Общие решения
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 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 how you would position it over the jpg.
Via <a href="#" onclick="location.href='http://www.cssmojo.com/png_overlay_with_no_extra_markup/'; return false;" 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" />