gpt4 book ai didi

javascript - 以透明方式在另一张新图像上显示一张新图像(CSS 或 JS)

转载 作者:行者123 更新时间:2023-12-02 21:55:25 24 4
gpt4 key购买 nike

#

我读了很多代码,但显然,它们都没有解决我的问题。

假设你有这个简单的 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>

你有 image1.jpg。所有图像都具有相同的尺寸。

如何将 image1.jpg 置于具有透明度的 image_bbb.jpg 之上,这样您仍然可以看到一点 image_bbb.jpg?

问题的焦点在于OVER。我认为透明度可以通过“不透明度: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!)

最佳答案

这可能有助于使用 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="/image/zMoo4.jpg">

</div>

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

</div>
</body>

关于javascript - 以透明方式在另一张新图像上显示一张新图像(CSS 或 JS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60026197/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com