To make the pseudo-element the same size as the parent, position it absolutely and set its top, right, bottom, and left values to zero to prevent it from collapsing. Also, since it is a pseudo-element, it must have the content attribute set or it will not appear on the page. (You may alternatively place the background picture in its own child element, but utilizing a pseudo-element simplifies the HTML.)
A word of caution
Surprisingly (or maybe not), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, fortunately for us, Microsoft went wild with integrating numerous filters in Internet Explorer in the year 2000. One of these is the gradient filter, which we can utilize by defining the same start and finish color. âOkay, but how do I acquire the transparency?â you may be wondering. The answer is that it will be declared as part of the color hex value. A CSS gradient filter that achieves the same effect as the CSS code above would be as follows:
Create an HTML page with the heading h1 and the class translucent, for example. Fill in the blanks with the words Hello World. To give the class a backdrop color, use the rgba() method. Enter rgba(255, 100, 100, 0.4) as the value. Reduce a's value to make it more transparent, and raise a's value to make it more opaque. As we increase the value of a to 0.4, the background color of the heading becomes translucent. The child element heading, on the other hand, does not become translucent.
