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>
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>
this code changes only background opacity
.bg{
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
<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: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
</style>
change only background opacity with rgba
.bg{
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
This is actually pretty easy to do using rgba() in CSS, but it's something quite a few people don't know about.
Most people know about using rgb(255,255,255) instead of #FFFFFF to set colours
You can just set the background opacity (which is the opposite of transparency, where 1 is solid and 0 is completely transparent).
.bg {
background-color: rgba(0,0,0,0.5) //This sets background to black, with half transparency
color: #FFFFFF;
}
<style>
.backgorund_opacity {
background-color: rgba(0, 0, 0, 0.5); /* 0.5 use for opacity ( 0.0-0.9 )*/
}
</style>
you use also like as
.background {
opacity: 0.5;
}
