Непрозрачность/прозрачность CSS

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

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

opacity Максимальное значение свойства varies от 0.0 до 1.0. Чем меньше значение, тем больше прозрачность:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

Пример

img {
  opacity: 0.5;
}

Попробуйте сами

прозрачный эффект наведения

opacity Эта свойство обычно используется с :hover Выборщик используется вместе, чтобы изменить непрозрачность при наведении мыши:

Тюльпан
Тюльпан
Цветок

Пример

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

Попробуйте сами

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

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

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

Пример обратного эффекта наведения мыши:

Тюльпан
Тюльпан
Цветок

Пример

img:hover {
  opacity: 0.5;
}

Попробуйте сами

Прозрачной рамки

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

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

Пример

div {
  opacity: 0.3;
}

Попробуйте сами

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

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

100% непрозрачности
60% непрозрачности
30% непрозрачности
10% непрозрачности

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

Цвета RGBA задаются как: rgba(red, green, blue, alpha)。 alpha Параметр - это число между 0.0 (полностью прозрачный) и 1.0 (абсолютно непрозрачный).

Совет:Вы найдете в наших Цвета CSS В этой главе вы узнаете больше о цветах RGBA.

Пример

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;
}
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>.