#css #image
#css #изображение
Вопрос:
Как отобразить одно изображение поверх другого изображения в файле css
Комментарии:
1. Опубликовать какой-то код? Скриншот того, как вы хотите, чтобы это выглядело? Добавьте еще немного, и, возможно, вы получите ответ.
2. Прочитайте это, чтобы правильно сформулировать свой вопрос и получить достойный ответ: meta.stackexchange.com/questions/18614 /…
3. прямо сейчас у меня есть этот код: div.art-header-jpeg { позиция: абсолютная; сверху: 0; справа: 0; ширина: 892px; высота: 200px; фоновое изображение: url (‘ localhost/adwebservice/images/header.jpg ‘ ); background-repeat: без повтора; background-position: center по центру; } Теперь я хочу добавить другое изображение на это изображение
Ответ №1:
С помощью CSS вы можете указать z-индекс элемента, что позволит вам «укладывать» элементы «поверх» друг друга при рендеринге стиля в разметку. Например, вы можете присвоить двум элементам одинаковое положение на странице, но разные значения z-индекса, и они будут уложены друг на друга.
Это часто используется в сочетании с плавающим значением элемента или с абсолютным позиционированием, поскольку традиционно плавающие элементы обычно «толкают» друг друга относительно своего положения, а не абсолютно располагаются друг над другом. Пример здесь. Здесь много информации.
Ответ №2:
Вам следует опубликовать больше информации, но, по крайней мере, взгляните на функциональность z-index в css здесь. Это должно очень помочь, если я правильно понял ваш вопрос.
Ответ №3:
Существует несколько способов, но ключевым является использование позиционирования ( position: relative например) с z-индексами.
Ответ №4:
Это работает во всех основных браузерах.. Проверьте это
<html>
<head>
<style>
.search_customization-icon_icon {
position: relative;
margin-top: -40px;
margin-left: 3px;
width: 162px;
height: 22px;
display: block;
background: url(http://Apparelnbags.com/skins/skin_1/images/anb_icon_sold-with-customization_icon.png) no-repeat center;
}
</style>
</head>
<body>
<table>
<tr>
<td style="padding-right:5px;">
<span style="width:190px;height:235px;display: block;">
<a title="Alternative AA04 Ladies Rib Crew" href="http://www.apparelnbags.com/alternative/aa04-53-oz-rib-crew-t-shirt.htm">
<img src="http://images.apparelnbags.com/product/icon/AA04.jpg" style="position:relative;border:0">
<span class="search_customization-icon_icon">
</span>
</a>
</span>
</td>
</tr>
</table>
</body>
</html>