Menu
I am creating a webpage that have a transparent div.
I want to add a non-transparent div inside that transparent div and I find that it is also transparent.
I try to set the div inside to opacity:1 but it doesn't work.
What should I do?
776
There's no CSS property that you can use to change the opacity of only the background image. Unlike background colors, which allow you to adjust the alpha channel to control opacity, it simply doesn't exist for the background-image property.
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
Easiest way is to create a semi-transparent PNG and just use that as your background image for the div. If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!
Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.
But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.
ex.
#mydiv { background-color: rgba(128,64,0,0.75); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
