CSS backgrounds:-
CSS background properties are used to make the background more effective.
CSS background color:-
CSS background-color properties are used to change the background color of any page.
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color: gray;}
</style>
</head>
<body>
<h1> This is a heading</h1>
<p> This is a paragraph.</p>
</body>
</html>
Try this code for a better experience
Other elements:-
You can set the background for any HTML element.
<!DOCTYPE html>
<html>
<head>
<style>
h1{background-color: red;
color: green;
}
div{background-color: green;}
p{color: blue;}
</head>
<body>
<h1> CSS background color example </h1>
<div> This paragraph is inside div.
<p> This paragraph has its own background and text color.
This paragraph is still inside div.
</div>
</body>
</html>
Try this code for a better experience
Opacity / Transparency:-
The opacity/Transparency property specifies the opacity/transparency of an element. The opacity property can take 0.0 - 1.0. The low value, high opacity.
<!DOCTYPE html>
<html>
<head>
<style>
div{background-color: green;}
div. first{opacity: 0.1;}
div. second{opacity: 0.3;}
div. third{opacity: 0.6;}
</style>
</head>
<body>
<h1> Opacity/Transparency </h1>
<p> When we use the opacity property to add transparency to the background of an element, all of its child elements will be transparent as well.
<div class= "first">
<h1> Opacity 0.1 </h1>
</div>
<div class= "second">
<h1> Opacity 0.3 </h1>
</div>
<div class= "third">
<h1> Opacity 0.6 </h1>
</div>
<div>
<h1> Opacity 1 (by default) </h1>
</div>
</body>
</html>
Try this code for a better experience
0 Comments