Menu
how I can change opacity of div background that doesn't make change opacity of text or anything inside of that?
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg">
<h1>welcome</h1>
<p>Hello world. Welcome to my site</p>
</div>
</body>
</html>
<style>
.bg{
background-color: black;
color: #ffffff;
}
</style>
241
Transparency using RGBA In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
You have to add the following CSS property to achieve the transparency levels. This sets the background-color of an element to black with 50% opacity. The last value in an rgba value is the alpha value. An alpha value of 1 is equal to 100% opacity, and 0.5 (or .
The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
Have you tried to use the RGBa notation, where 'a' stands for alpha (opacity or transparency)?
<style>
.bg {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With