HTML and CSS Reference
In-Depth Information
.transparency {
padding:15px;
background-color:rgba(10,200,0,0.3);
border: 2px solid #071394;
}
This function specifies the red, green, and blue components as
10
,
200
, and
0
, respectively. The
alpha
parameter is specified as
0.3
. Figure 13-17 shows how a box looks when you apply transparency of 0.3.
Figure 13-17.
Setting a box's transparency using the
rgba()
function
In the figure, the second box is styled using
rgba()
. Notice how the background doesn't show through
the first box but does show through the second box, due to the transparency
alpha
value of
0.3
.
You can obtain a similar effect using the
opacity
property instead of
rgba()
:
.transparency2 {
padding:15px;
background-color:#ffd800;
opacity:0.75;
border: 2px solid #071394;
}
The
opacity
property takes any value between 0 and 1, just like the
alpha
parameter discussed earlier.
Figure 13-18 shows the resulting box .
