html tutorial - How to change the opacity of an element's background without affecting the child elements or text content - html5 - html code - html form
Answer: Use the CSS RGBA colors
There is no CSS property like background-opacity that you simply will use just for dynamical the opacity or transparency of an element's background while not affecting the kid components, on the opposite hand if you'll attempt to use the CSS opacity property it'll not only changes the opacity of background however changes the opacity of all the kid components as well.
In such scenario you'll be able to use RGBA color introduced in CSS3 that features alpha transparency as a part of the colour worth. exploitation RGBA color you'll be able to set the colour of the background as well as its transparency. Learn additional regarding CSS color values.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style type="text/css">
body {
background-image: url("images/pattern.jpg");
}
p{
padding: 30px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font: 20px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the text content.</p>
</body>
</html>Alternatively, you'll be able to use transparent PNG pictures. check up on the tutorial on CSS Opacity to find out additional about setting text during a transparent box.