Как разместить частично прозрачное изображение над другим изображением в html?

Question

Я хочу разместить изображение над другим изображением, так что, когда я сделаю свое второе изображение частично прозрачным, первое изображение будет видно. Но я не хочу использовать фоновое изображение для первого изображения как

<div style="background-image: url("firstImage.png");"> 
    <img src="secondImage.png"/> 
</div> 

как это очень очевидно. Есть ли какой-либо метод, чтобы поместить другое изображение на первое изображение, не делая первое изображение в качестве фонового изображения.

Answer 1

Собирались использовать CSS для этого. Оператор position позволяет установить absolute и relative.

Установив position:absolute, мы можем поместить элемент относительно документа (0,0). Затем вы можете использовать top, bottom, left, right для дальнейшего позиционирования элемента относительно этих ребер.

position:relative похож на размещение по умолчанию элементов HTML по умолчанию. Однако, добавив position:relative к родительскому элементу, расположенному в позиции absolute, мы вынуждаем его использовать роль участника (0,0), а не документ.

.layered-image { 
 
    position: relative; 
 
} 
 
.layered-image img { 
 
    height: 200px; 
 
    width: 300px; 
 
} 
 
.image-overlay { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 30px; 
 
    opacity: .4 
 
}

<div class="layered-image"> 
 
    <img class="image-base" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" alt=""/> 
 
    <img class="image-overlay" src="https://newevolutiondesigns.com/images/freebies/city-wallpaper-47.jpg" alt="" /> 
 
</div>

Примечание стороны: В то время как z-index может быть полезным, я стараюсь избегать его всякий раз, когда это возможно. Это вызывает некоторые неприятные ошибки в последних версиях webkit, особенно для сафари в iOS. Если вы правильно закажете свои html-элементы, нет необходимости использовать z-index. За исключением, конечно, когда вы должны.

Answer 2

попробовать это:

<div class="imageWrapper" style="position: relative; width: 195px; height: 195px;"> 
    <img src="firstImage.png" alt=.. width=.. height=..style="position: relative; z-index: 1;" /> 
    <img src="secondImage.png" alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" /> 
</div> 

для более решений проверить эту link.

Answer 3

Пожалуйста, проверьте ссылку ниже

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

вы получите то, что вы хотите с помощью простого CSS изменяет & непрозрачности функцию

Answer 4

Поместите теги изображений в контейнере, и первым сделать позиции в абсолютной после этого установите свойство z-index заднего или фронтального изображения, затем установите значение изображения.

  img { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    } 
 
    
 
    img.front { 
 
    z-index: 2 opacity: 0.6; 
 
    filter: alpha(opacity=60); 
 
    } 
 
    
 
    img.back { 
 
    z-index: 1 
 
    }

<div> 
 
    <img class="back" src="http://all4desktop.com/data_images/original/4237684-images.jpg" /> 
 
    <img class="front" src="http://www.hdwallpapery.com/static/images/creativity_water_spray_drops_flower_rose_desktop_images_TVIdSpG.jpg" /> 
 

 
</div>