ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Opacity / Transparency


Свойство opacity определяет непрозрачность / прозрачность элемента.


Прозрачное изображение

Свойство opacity может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(по умолчанию)

Примечание: IE8 и более ранние версии используют filter:alpha(opacity=x). Значение x может принимать значение от 0 до 100. Более низкое значение делает элемент более прозрачным.

Пример

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Для IE8 и ранее */
}
Попробуйте сами »

Эффект прозрачности при наведении курсора

Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении курсора:

Northern Lights
Mountains
Italy

Пример

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Для IE8 и ранее */
}

img:hover {
  opacity: 1.0;
  filter: alpha(opacity=100); /* Для IE8 и ранее */
}
Попробуйте сами »

Объяснение примера

Первый блок CSS похож на код в Примере 1. Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. Значение в CSS для этого opacity:1;.

Когда указатель мыши отходит от изображения, изображение снова становится прозрачным.

Пример обратного эффекта при наведении курсора:

Northern Lights
Mountains
Italy

Пример

img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Для IE8 и ранее */
}
Попробуйте сами »

Прозрачный блок

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

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Пример

div {
  opacity: 0.3;
  filter: alpha(opacity=30); /* Для IE8 и ранее */
}
Попробуйте сами »

Прозрачность с использованием RGBA

Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте цветовые значения RGBA. В следующем примере задается прозрачность цвета фона, а не текста:

100% opacity

60% opacity

30% opacity

10% opacity

Из раздела Цвета CSS вы узнали, что в качестве значения цвета можно использовать RGB. В дополнение к RGB можно использовать значение цвета RGB с альфа-каналом (RGBA), которое определяет непрозрачность для цвета.

Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий, альфа). Параметр alpha - это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).

Совет. Подробнее о цветах RGBA вы узнаете в разделе CSS Цвета.

Пример

div {
  background: rgba(76, 175, 80, 0.3) /* Зеленый фон с 30% прозрачности */
}
Попробуйте сами »

Текст в прозрачном поле

Это некоторый текст, который помещается в прозрачный блок.

Пример

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* Для IE8 и ранее */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Это некоторый текст, который помещается в прозрачный блок.</p>
  </div>
</div>

</body>
</html>
Попробуйте сами »

Сначала мы создаем элемент <div> (class="background") с фоновым изображением и границей. Затем мы создаем еще один <div> (class="transbox") внутри первого <div>. <div class="transbox"> имеют цвет фона и границу - div прозрачен. Внутри прозрачного <div> мы добавляем текст внутри элемента <p>.


Проверьте себя с помощью упражнений!