Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (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>

Строчка "" подключает файл стилей CSS.

Вот он (он называется style.css):

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

В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.

Вот так всё просто. Пробуйте, у вас обязательно всё получится!

* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.