将一张新图片显示在另一张透明图片上（CSS 或 JS）

Question

# #

I read a lot of codes but apparently, none of them addresses my question here.我阅读了很多代码，但显然，它们都没有在这里解决我的问题。

Say you have this simple html:假设你有这个简单的 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>

And you have image1.jpg.你有 image1.jpg。 All images have the same size.所有图像都具有相同的大小。

How can you put image1.jpg OVER image_bbb.jpg with transparency, so that you can still see a little bit of image_bbb.jpg?怎样才能把image1.jpg OVER image_bbb.jpg 透明化，这样还是能看到一点点image_bbb.jpg？

The focus of the question is on the OVER.问题的重点是OVER。 I presume that the transparency could be obtained with a "opacity: 0.30;"我认为可以通过“不透明度：0.30;”获得透明度。 in the CSS for instance.例如在 CSS 中。

Thanks!谢谢！

PS: Important: image1.jpg is not in the html code. PS：重要提示：image1.jpg 不在 html 代码中。 It must be handled afterwards.必须事后处理。 So please avoid some solution like:所以请避免一些解决方案，如：

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

and CSS overlapping.和 CSS 重叠。 But rather something like this:而是这样的事情：

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

PPS: If suitable, you can also use JS for the solution. PPS：如果合适，也可以用JS来解决。

(Thanks to @Paulie_D!) （感谢@Paulie_D！）

Answer 1

This may help the image is getting inserted using jquery这可能有助于使用 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>

将一张新图片显示在另一张透明图片上（CSS 或 JS）

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-02 13:10:16

将一张新图片显示在另一张透明图片上（CSS 或 JS）

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-02 13:10:16

解决方案1
1 已采纳 2020-02-02 13:10:16