📜 ⬆️ ⬇️

Translucent background

I would like to show how to quickly make a translucent background. If you use the opacity command in CSS, then the background will of course become transparent, but with it everything else that is on it too.

How to fix this problem? I rummaged on the Internet and found a wonderful way, which I will tell you now.

Let's say this is your site (html):

<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title> Полупрозрачный фон </title> </head> <body> <div class="mid"> <p>Ваш текст</p> Ваш текст. Ваш текст. </div> </body> </html> 

The line "" includes the CSS style file.

Here it is (it is called style.css):

 body{ background: "Ваша картинка для фона" ; * background-attachment: fixed ; background-position: top center; } .mid{ width: 1250px;** margin: 0 auto; background: rgba(161,21,207, 0.5);*** } 

In the class of mid 3 line sets the color of a translucent color in the format RGBA. Its 4 digit, in this case 0.5 - the value of transparency from 0 to 1.

That's how simple it is. Try it, you will definitely succeed!

* - insert url pictures here
** - set the width of the page (for this in the html code, we created a class mid)
*** - rgba is a color in rgb format. The last letter (a) means background transparency. Its value is a digit from 0 to 1. 0 is a completely transparent background, respectively, 1 is the opposite.

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