The Complete WebDeveloper (47 Blogs) Become a Certified Professional

Everything You Need To Know About Opacity In CSS

Last updated on Dec 13,2019 1.4K Views


This article will introduce you to concept that will help you understand opacity in CSS and tell you how to control this parameter. Following pointers will be covered in this article,

Background opacity of an element is a useful feature setting in HTML design. By setting the level of opacity (inverse of transparency), a designer can control the visibility of the element through the CSS opacity property. This is generally used as a background setting when there is cascading of elements, placed one above the other.

The most common scenario in which this feature is used is this:

  • A partially transparent background image is placed behind a text element.
  • The background image is hazily visible, so it does not dominate the text in front.
  • The image may come into full focus when the user explicitly chooses to see it.

You might want to read up on the CSS basics before getting on with learning about CSS opacity.

For a comprehensive CSS tutorial, visit Edureka CSS Tutorial For Beginners. You will get an excellent heads-up on the way CSS is to be used to augment HTML web design.

Moving on with this article on Opacity in CSS

Opacity in CSS

In CSS, Opacity is set as a numeric value ranging between 0.0 – 1.0. Values closer to zero represent more transparency, the image will be very light in visibility. Let’s start with an example of an image being shown with 50% transparency. See Example 1 below.

Example 1: Background image set to semi-transparency

<!DOCTYPE html>
<html>
<body>
<style>
img
{
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
<img src="https://otb.cachefly.net/wp-content/uploads/2014/10/tom-and-jerry-570x427.jpg" alt="TOM AND JERRY" width="420" height="420">
</body>
</html>

Example 1: Output

Output- Opacity in CSS- Edureka
Original Image (100% Opacity)
Output- Opacity in CSS- Edureka
Image with 50% Opacity setting

In the above example, there was just one element – an image. Other elements can also be set with the opacity parameter such as text, div elements and so on.

Moving on with this article on Opacity in CSS

Opacity inherited with cascading elements

When elements are stacked one over the other, if the background element has the opacity setting, then it is inherited by all the child elements. This is the default setting. That means if a text box is placed over an image and the image has a 0.5 opacity setting, then both the image and text element will only be partially visible.

Let us take the instance of a child text element placed over the TOM & JERRY image in our next Example. We can see the default opacity effect in Example 2.

<!DOCTYPE html>
<html>
<body>
<style>
.container
{
position: relative;
text-align: center;
opacity: 0.5;
}
.centered
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: blue;
font-size: 40px;
}
}
</style>
<div class="container">
<img src="https://otb.cachefly.net/wp-content/uploads/2014/10/tom-and-jerry-570x427.jpg" alt="TOM AND JERRY" width="420" height="420">
<div class="centered">TOM & JERRY</div>
</body>
</html>

Example 2: Text inherits opacity from parent image

Output- Opacity in CSS- Edureka

Moving on with this article on Opacity in CSS

RGBA Attribute setting for cascading elements

There is another way in which opacity can be controlled with cascading elements. If you want the child element to remain unaffected by the opacity of its background element, then you can use RGBA attribute setting.

Example 3: Using RGBA setting


background: rgba(76, 175, 80, 1.0)
/*Image has no opacity setting*/
/*Green background for text with 100% opacity */
/*Blue color text has 100% opacity*/

Example- Opacity in CSS- Edureka

background: rgba(76, 175, 80, 0.4)
/*Image has no opacity setting*/
/* Green background for text with 40% opacity */
/* Blue text still seen with 100% opacity*/

Example- Opacity in CSS- Edureka

After the RGB color code, attribute ‘a’ stands for alpha. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Moving on with this article on Opacity in CSS

Opacity changes on the hover effect

In some scenarios, web designers want the opacity to vary depending on whether the user is focussed on the element or not. For instance, let’s say an image is set to 50% opacity by default. However, when the user hovers the mouse over the image, then we want the image to come into full focus with 100% opacity.

Example 4 shows how this is done.

Common points to note:

  • Opacity setting is an alternative to using the ‘visibility’ attribute in CSS. However, using the opacity setting makes it easy to set varying degrees of transparency, ranging from zero to full.
  • The level of opacity is to be set after careful testing in various browsers. When opacity is set to low values, sometimes the text or image may become completely invisible or unreadable.
  • The idea behind using opacity is to put sharp focus on some elements while other background elements don’t distract the user’s attention. So such background elements are set with lower opacity.
  • In Internet Explorer, for IE8 and older versions, the opacity property is a ‘filter’ setting ranging from 1 to 100. In all other browsers, it ranges from 0 to 1.

This brings us to the end of this article on Opacity In CSS.

If you’re interested in learning more about web-development, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

If you are still interested If you have any question, you could post it in the comment section of this “Opacity In CSS” blog, and we will get back to you as soon as possible.

Upcoming Batches For Web Developer Certification Training Course
Course NameDate
Web Developer Certification Training Course

Class Starts on 25th March,2023

25th March

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

Everything You Need To Know About Opacity In CSS

edureka.co