In this case background-color:rgba(0,0,0,0.5);
is the best way.
For example: background-color:rgba(0,0,0,opacity option);
To achieve it, you have to modify the background-color
of the element.
Ways to create a (semi-) transparent color:
The CSS color name transparent
creates a completely transparent color.
Usage:
.transparent{
background-color: transparent;
}
Using rgba
or hsla
color functions, that allow you to add the alpha channel (opacity) to the rgb
and hsl
functions. Their alpha values range from 0 - 1.
Usage:
.semi-transparent-yellow{
background-color: rgba(255, 255, 0, 0.5);
}
.transparent{
background-color: hsla(0, 0%, 0%, 0);
}
Besides the already mentioned solutions, you can also use the HEX format with alpha value (#RRGGBBAA
or #RGBA
notation).
That's pretty new (contained by CSS Color Module Level 4), but already implemented in larger browsers (sorry, no IE).
This differs from the other solutions, as this treats the alpha channel (opacity) as a hexadecimal value as well, making it range from 0 - 255 (FF
).
Usage:
.semi-transparent-yellow{
background-color: #FFFF0080;
}
.transparent{
background-color: #0000;
}
You can try them out as well:
transparent
:div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: transparent;
}
_x000D_
<img src="https://via.placeholder.com/200x100">
<div>
Using `transparent`
</div>
_x000D_
rgba()
:div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: rgba(0, 255, 0, 0.3);
}
_x000D_
<img src="https://via.placeholder.com/200x100">
<div>
Using `rgba()`
</div>
_x000D_
#RRGGBBAA
:div {
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
border: 1px dashed grey;
background-color: #FF000060
}
_x000D_
<img src="https://via.placeholder.com/200x100">
<div>
Using `#RRGGBBAA`
</div>
_x000D_
Keep these three options in mind (you want #3):
1) Whole element is transparent:
visibility: hidden;
2) Whole element is somewhat transparent:
opacity: 0.0 - 1.0;
3) Just the background of the element is transparent:
background-color: transparent;
Yes you can just plain text as
.someDive{
background:transparent
}
now you can use rgba in CSS properties like this:
.class {
background: rgba(0,0,0,0.5);
}
0.5 is the transparency, change the values according to your design.
Live demo http://jsfiddle.net/EeAaB/
Here is an example class using CSS named colors:
.semi-transparent {
background: yellow;
opacity: 0.25;
}
This adds a background that is 25% opaque (colored) and 75% transparent.
CAVEAT
Unfortunately, opacity will affect then entire element it's attached to.
So if you have text in that element, it will set the text to 25% opacity too. :-(
The way to get past this is to use the rgba
or hsla
methods to indicate transparency as part of your desired background "color". This allows you to specify the background transparency, independent from the transparency of the other items in your element.
Here are 3 ways to set a blue background at 75% transparency, without affecting other elements:
background: rgba(0%, 0%, 100%, 0.75)
background: rgba(0, 0, 255, 0.75)
background: hsla(240, 100%, 50%, 0.75)
yes, thats possible. just use the rgba-syntax for your background-color.
.menue{
background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
Source: Stackoverflow.com