All geek questions in one place

Change background opacity using CSS

how can i change the opacity of the background of a div that doesn't change the transparency of the text or anything inside 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>
+5
source share
6 answers

this code only changes the opacity of the background

 .bg{ background: rgba(0, 0, 0, 0.6); color: #ffffff; }
+3
source

Have you tried using RGBa notation, where "a" means alpha (opacity or transparency)?

 <style> .bg { background-color: rgba(0, 0, 0, 0.5); color: #ffffff; } </style>
+5
source 
 <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>
+3
source

only change background opacity with rgba

 .bg{ background: rgba(0, 0, 0, 0.6); color: #ffffff; }
+2
source

This is actually pretty easy to do with rgba() in CSS, but it's something pretty small that people don't know about.

Most people are aware of using rgb(255,255,255) instead of #FFFFFF to set colors

You can simply set the opacity of the background (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; }
0
source 
 <style> .backgorund_opacity { background-color: rgba(0, 0, 0, 0.5); /* 0.5 use for opacity ( 0.0-0.9 )*/ } </style>

you also use like

 .background { opacity: 0.5; }
0
source

Source: https://habr.com/ru/post/1200465/

More articles:


All Articles