gpt4 book ai didi

javascript - 如何在不影响覆盖文本不透明度的情况下更改 css 中图像的不透明度

转载 作者:太空宇宙 更新时间:2023-11-03 20:38:10 25 4
gpt4 key购买 nike

我想更改 html 中图像的不透明度,但不想更改覆盖在其上的文本的不透明度。

这是我的 html 代码:-

<div class="image">
<img src = "C:/Users/Anmol/Desktop/NewSite/Images/background/bg_4.jpg">
<div class="text">
<h1>My Site</h1>
</div>
</div>

这是它的CSS代码:-

.image{
opacity: 0.5;
margin: 0px 0px 0px 0px
}
.image .text {
position:absolute;
text-align: center;
top:10px;
right:500px;
width:300px;
}

请告诉我该怎么做(如果可能的话)?

最佳答案

不,您不能直接这样做,子元素的不透明度不能大于其父元素的不透明度。

在您的情况下,最简单的解决方案是不要让文本成为图像的子元素(例如,让图像和文本处于同一级别):

.holder {
position: relative;
}
.image{
opacity: 0.5;
margin: 0px 0px 0px 0px
}
.text {
position:absolute;
text-align: center;
top:10px;
width:300px;
}
<div class=holder>
<div class="image">
<img src = "http://i.imgur.com/IQRCO5Lm.jpg">
</div>
<div class="text">
<h1>My Site</h1>
</div>
</div>

关于javascript - 如何在不影响覆盖文本不透明度的情况下更改 css 中图像的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30025488/

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