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,
- Opacity in CSS
- Opacity inherited with cascading elements
- RGBA Attribute setting for cascading elements
- Opacity changes on the hover effect
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
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
Transform your designs and boost your career with our UI UX Design Course.
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
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*/
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*/
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).
Check out the Angular Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
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.