opacity property in CSS is used to adjust the transparency of an element.The opacity property has a value range of 0.0 (transparent) to 1.0 (opaque). The syntax is as follows:
opacity: value;
The value parameter can be any number between 0.0 and 1.0, or a percentage value between 0% and 100%.
Let's take a look at an example of setting the opacity of an HTML element using CSS:
<!DOCTYPE html>
<html>
<head>
<title>CSS Opacity Example</title>
<style>
div {
background-color: limegreen;
opacity: 0.5;
padding: 20px;
}
p {
opacity: 0.8;
}
</style>
</head>
<body>
<div>
<h1>Hello, world!</h1>
<p>Welcome to CSS opacity.</p>
</div>
</body>
</html>
In this example, we have set the opacity of the div element to 0.5. This makes the blue color of the element semi-transparent. We have also set the opacity of the p element to 0.8, which makes the text semi-transparent.
The opacity property in CSS affects the entire element, including its content and any child elements. If you want to set the opacity of only the element's background color or border, you can use the background-color or border-color property instead.
The opacity property is useful for creating transparent or semi-transparent elements, such as overlays, modals, or buttons. It can also be used to create visual effects or highlight certain elements on a page.
opacity property is not inherited by child elements.opacity property affects the visibility of an element, but not its position or size.CSS opacity is a versatile property that allows you to create transparent and semi-transparent elements on your web pages. By adjusting the opacity level of images, text, borders, and other HTML elements, you can achieve a variety of visual effects and highlight certain elements on your page.