Полупрозрачность элементов CSS

Сегодня мы рассмотрим тему, благодаря которой возможно задавать прозрачность элементов на странице. Это CSS свойство называется opacity. Изучаемое свойство может принимать значения от нуля до единицы, дробными значениями. Значение ноль означает полную прозрачность элемента и соответственно единица означает полную непрозрачность элемента. Приступим к рассмотрению изучаемого свойства на примере:


								<html>

								<head>

								 <title>Прозрачность элементов</title>

								 <link rel="stylesheet" href="css/styles.css" type="text/css" />
								
								</head>

								<body>

								  <img src="images/orange.jpg" alt="прозрачность" />
							
								</body>

								</html>

И при помощи свойства opacity задаем прозрачность для картинки.


								img {

								  opacity: 0.5;

								}

Мы вывели изображение на экран и при помощи css свойства opacity, установили полупрозрачность для изображения равную 0.5. Означать данное значение будет то, что изображение ровно на половину будет прозрачным.

Можете посмотреть на результат: