отображать одно новое изображение поверх другого с прозрачностью (CSS или JS) - PullRequest
Новая
       0

отображать одно новое изображение поверх другого с прозрачностью (CSS или JS)

0 голосов
/ 02 февраля 2020
#

Я прочитал много кодов, но, по-видимому, ни один из них не отвечает на мой вопрос здесь.

Скажем, у вас есть этот простой html: 

<html>
<head>
</head>
<body>
<div class="aaa" style="display: inline">
<img src="image_aaa.jpg">
</div>
<div class="bbb" style="display: inline;">
<img src="image_bbb.jpg">
</div>
<div class="ccc" style="display: inline">
<img src="image_ccc.jpg">
</div>
</body>
</html>

И у вас есть изображение1. JPG. Все изображения имеют одинаковый размер.

Как вы можете поместить image1.jpg OVER image_bbb.jpg с прозрачностью, чтобы вы все еще могли видеть немного image_bbb.jpg?

Фокус вопрос наверху. Я предполагаю, что прозрачность может быть получена с «непрозрачностью: 0,30;» например, CSS.

Спасибо!

PS: Важно: image1.jpg отсутствует в коде html. Это должно быть обработано впоследствии. Поэтому, пожалуйста, избегайте таких решений, как: 

<div class="aaa" style="display: inline">
<img src="image_aaa.jpg">
<img src="image1.jpg">
</div>

и CSS с перекрытием. Но скорее как-то так: 

<html>
<head>
<script>
((image1.jpg code here if JS used))
</script>
<style>
((or image1.jpg code here if CSS used))
</style>
</head>
<body>
...

PPS: Если подходит, вы также можете использовать JS для решения.

(Спасибо @Paulie_D!)

1 Ответ

1 голос
/ 02 февраля 2020

Это может помочь вставить изображение, используя jquery

$(document).ready(function(){
            $('.aaa').append('<img class="myImg2" src="https://wallpapercave.com/wp/wp4473257.jpg">')
        })
.aaa{
            width: 400px;
        }
        .myImg{
            width: 400px;
            position: absolute;
        }
        .myImg2{
            width: 400px;
            position: absolute;
            opacity: .3;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="aaa" style="display: inline">
<img class="myImg" src="https://i.stack.imgur.com/zMoo4.jpg">

</div>

<div class="ccc" style="display: inline">

</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...