+ 2

After adding an opacity of 0.3 to the div the text is also affected , how can i fix this ;

<body> <div> <p> some text </p> Background image </div> </body> <style> div { background-image:url(image); opacity:0.2; } </style>

background z-index image

25th Feb 2021, 7:35 PM

Francisco Bensaia

3 Answers

+ 3

you cannot... without trickiest design ^^ you must define your background image on another div inside the initial one, and position it as absolute plus set top left bottom and right to 0, position initial div as relative (to give your background child a reference for positioning), position also your p as relative and set higher z-index than the one you will set to the background child div...

25th Feb 2021, 7:43 PM

visph

+ 2

Thanks

25th Feb 2021, 7:45 PM

Francisco Bensaia

+ 2

Akkadian Uralic it would not work since p is child of another transparent element, as opacity apply to all subtree... if children have too opacity defined they will be affected by ancestors ^^

25th Feb 2021, 8:24 PM

visph