CSS Background Image Opacity

Introduction

Opacity and transparency are the two sides of the coin. Both are used for designing the website. With the help of those, we can create contrast and reinforce a brand's identity. There are many web designing techniques available in CSS. Out of those, we use opacity and transparency intentionally. We can control the opacity of any content with the help of the below things.

• background
• text
• border
• image
• gradient
• color

How to Set Opacity in CSS

With the help of the opacity property of the CSS, we can set the opacity for an image, element, or text. The range for the value of the opacity lies between 0 to 1. If we set the opacity value to 0, then the element will be completely transparent or invisible. If we set the opacity value as 1, then the element will be completely opaque. Let's understand this by taking an example.

Example 1:

HTML code:

Output

CSS Background Opacity

When there is a need to make the background element more transparent, then we have to go for CSS background opacity. But we have to keep in mind that we can not provide the style property to the opaque element, but we can provide the style property to the child element. Let's understand this by taking an example.

Example 2:

Code:

Output

Explanation:

In the above code, we have created a semi-transportable background that has a background image.

Text Opacity CSS

We can also provide the opacity feature to the CSS text. It is very similar to providing the opacity property to the background of an element. We can also set the opacity property to the entire element - the background, text within the element, the border, and everything else. To achieve the opacity of the text, we have to provide CSS color property and RGBA color value to the targeted element. Let's understand this with the help of the below example.

Example 3:

Code:

Output

Explanation:

In the above code, we have created a webpage that contains text with reduced opacity.

Border Opacity CSS

We can also set the opacity property for the border, which is similar to providing the opacity property to the text element. So, to achieve this, we have to provide the opacity property to the targeted element. Then, we have to provide the use of the CSS shorthand border property and RGBA color values.

Example 4:

Code:

Output

Explanation:

In the above code, we have created the border with reduced opacity using the ::before pseudo-element.

Image Opacity in CSS

We can also provide the CSS opacity property to the image. We can use the perfect opacity property by hovering over the element. We can set the image as somewhat transparent and then become opaque when the user hovers over it. That's called a reverse transparent hover effect.

Example 5:

Code:

Output

CSS Opacity Gradient

We can also provide the CSS gradient property nu using the opacity property in which one color seems to be changed to another color. The color changes in a particular direction, like top to bottom, left to right, or diagonally. We have to keep in mind that we do not need to change the color gradient from one color to another. We have to provide the gradient feature to one color, gradually changing from fully opaque to fully transparent.

For this, there is no need to use the CSS gradient property. We have to take the help of background property and RGBA color values. This is very similar to changing the background color of the web page. Let's understand this with the help of the below example.

Example 6:

Code:

Output

Explanation:

In the above code, we have created the box with a CSS opacity gradient background. In the above code, we have also created the gradient, which goes from semi-transparent red (rgba(255, 0, 0, 0.8)) at the top to a semi-transparent blue (rgba(0, 0, 255, 0.8)) at the bottom.

CSS Color Opacity

In the above program, we have already seen how to change the color of the background. There, we used the opacity property and RGBA color model to change the background of the color. But now we have to change the color with the help of HSL colors. In CSS, HSL colors are a type of property for the color in which we can specify the hue, saturation, and lightness as well as the transparency of color. The format for the HSLA color is similar to RGBA color codes. Let's understand this with the help of the below example.

Example 7:

Code:

Output

Explanation:

In the above code, we have created a box that contains a background color. In this code, we have used the rgba() that defines color using Red, Green, Blue, and Alpha (opacity) values.