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; } 