CSS Tutorial for Beginners Part 28 - CSS Opacity | Learn Web Technologies
CSS Playlist
• CSS Tutorial for Beginners
HTML Playlist
• Html tutorial for beginners
Sign up for my newsletter to receive weekly updates
http://bit.ly/2RRFktj
Join our facebook page
bit.ly/2OKQYV7
CSS Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.
Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.
Transparent Hover Effect
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
----------------------------------------------------------------------------------------------------------------
#LearnWebTechnologies #CSS #CSSTutorialForBeginners