I want to change the opacity of an image in html but don't want to change the opacity of the text that is overwritten on it.
this is my html code:-
<div class="image">
<img src = "C:/Users/Anmol/Desktop/NewSite/Images/background/bg_4.jpg">
<div class="text">
<h1>My Site</h1>
</div>
</div>
and this is its css code:-
.image{
opacity: 0.5;
margin: 0px 0px 0px 0px
}
.image .text {
position:absolute;
text-align: center;
top:10px;
right:500px;
width:300px;
}
Please tell me how could I do it(if possible)?
No, you can't do it directly, a child element can't have an opacity greater than the one of its parent.
The easiest solution in your case is to not make the text a child of the image (have the image and the text at the same level for example):
.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>
Instead of giving opacity to the parent div give opacity to the img itself. This way opacity will effect the image only leaving your text alone.
img{ opacity: 0.5 }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.