Opacity
Opacity in web design refers to the level of transparency applied to an element. It controls how visible or invisible an element appears on a webpage. In CSS, the opacity property is used to define this transparency level. The value of opacity ranges from 0 to 1, where 0 represents complete transparency (fully invisible) and 1 represents full visibility (no transparency). Values between 0 and 1, such as 0.5, make the element partially transparent.
When opacity is applied to an element, it affects not only the element itself but also all of its child elements, including text and images. This means that if a container has an opacity value of 0.5, everything inside it will also appear 50% transparent. Opacity is commonly used in web design to create visual effects such as faded backgrounds, hover effects on images or buttons, overlays, and layered designs.
For example, applying opacity: 0.7; to an image will make it slightly transparent, allowing background elements to be partially visible through it. Designers often combine opacity with transitions to create smooth visual effects when users interact with elements.
Overall, the opacity property is an important CSS feature that enhances the visual appeal of a webpage by adding depth, focus, and interactive effects while maintaining a clean and modern design.
Code:-
<!DOCTYPE html>
<html>
<head>
<style>
.background-img {
url("bgdesert.jpg");
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3; /
z-index: -1;
object-fit: cover;
}
</style>
</head>
<body>
<h1>Background Opacity</h1>
<p>This text is to easy to read on this background image.</p>
<img src="bgdesert.jpg" alt="background image" class="background-img">
<h1>Your Content Here</h1>
<p>This text will remain fully opaque.</p>
</body>
</html>
Comments
Post a Comment