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 also everything else that is on it.

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><metacharset="UTF-8"><linkrel="stylesheet"href="style.css"><title>
			Полупрозрачный фон
		</title></head><body><divclass="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, is the transparency value from 0 to 1.

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

* - insert the url of the picture here
** - set the width of the page (for this, we created class mid in the html code)
*** - rgba is the color in the 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.

Also popular now: