Menu
I'm not using CSS3. So I can't use opacity or filter attributes. Without using these attributes how can I make the background-color transparent of a div? It should be kind of the text box example in this link. Here the text box background color is transparent. I want to make the same, but without using the above mentioned attributes.
237
If you just want your element to be transparent, it's really as easy as : background-color: transparent; But if you want it to be in colors, you can use: background-color: rgba(255, 0, 0, 0.4);
Create a transparent DIV (with the content) The div itself will be transparent, but the same applies for all other content such as images or text. <div style="filter:alpha(opacity=50); opacity:0.5;">........
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.
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.
The problem with opacity is that it will also affect the content, when often you do not want this to happen.
If you just want your element to be transparent, it's really as easy as :
background-color: transparent;
But if you want it to be in colors, you can use:
background-color: rgba(255, 0, 0, 0.4);
Or define a background image (1px by 1px) saved with the right alpha.
(To do so, use Gimp, Paint.Net or any other image software that allows you to do that.
Just create a new image, delete the background and put a semi-transparent color in it, then save it in png.)
As said by René, the best thing to do would be to mix both, with the rgba first and the 1px by 1px image as a fallback if the browser doesn't support alpha :
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
See also : http://www.w3schools.com/cssref/css_colors_legal.asp.
Demo : My JSFiddle
405
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
