Прозрачность изображения в CSS
Насколько прозрачным или непрозрачным выглядит элемент, задаётся свойством opacity.
Его значение лежит в диапазоне от 0.0 до 1.0: при 0.0 элемент полностью прозрачен, при 0.5 он прозрачен на 50%, а при 1.0, значении по умолчанию, полностью непрозрачен.
Пример
Prompt
Покажите три изображения рядом с разными значениями прозрачности: 0.2, 0.5 и 1.0 (по умолчанию). Используйте одно и то же изображение для всех трёх и подпишите каждое его значением прозрачности.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Opacity</title>
<style>
img {
width: 150px;
height: 113px;
}
</style>
</head>
<body>
<h2>Image Opacity</h2>
<p>opacity 0.2</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 0.2;">
<p>opacity 0.5</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 0.5;">
<p>opacity 1.0 (default)</p>
<img src="img_forest.jpg" alt="Forest" style="opacity: 1.0;">
</body>
</html>
Opacity и :hover
Частое сочетание — opacity с псевдоклассом :hover, чтобы прозрачность менялась при наведении курсора.
Пример
Prompt
Покажите изображение с прозрачностью 0.5 по умолчанию, которое меняется на прозрачность 1.0 при наведении. Используйте переход или прямое изменение прозрачности на псевдоклассе :hover.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity and Hover</title>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Opacity and :hover</h2>
<p>Hover over the image to see the full opacity effect:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="113">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="113">
</body>
</html>
Обратный эффект наведения
Эффект работает и в обратную сторону: можно сделать так, чтобы изображения при наведении становились прозрачными, а не непрозрачными.
Пример
Prompt
Покажите изображения, которые по умолчанию полностью непрозрачны и становятся прозрачными (прозрачность 0.5) при наведении. Это обратный эффект наведения.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reversed Hover Effect</title>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h2>Reversed Hover Effect</h2>
<p>Hover over the image to make it transparent:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="113">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="113">
</body>
</html>
Прозрачные блоки
Если добавить прозрачность к фону элемента через свойство opacity, каждый дочерний элемент станет таким же прозрачным, из-за чего текст внутри может быть трудно читать.
Пример
Prompt
Покажите четыре div-блока с зелёным фоном, каждый с разными значениями прозрачности: 1, 0.6, 0.3 и 0.1. Включите текст внутри каждого блока, чтобы показать, что дочерние элементы также становятся прозрачными при использовании свойства opacity.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Boxes</title>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparent Boxes</h2>
<p>When using the opacity property, all child elements also become transparent:</p>
<div style="opacity: 1;"><p>opacity 1</p></div>
<div style="opacity: 0.6;"><p>opacity 0.6</p></div>
<div style="opacity: 0.3;"><p>opacity 0.3</p></div>
<div style="opacity: 0.1;"><p>opacity 0.1</p></div>
</body>
</html>
Прозрачность с помощью background-color
Дочерние элементы не затрагиваются, если отказаться от opacity и задать для background-color значение RGBA.
RGBA — это RGB плюс альфа-канал, который хранит прозрачность цвета. Записывается как rgba(red, green, blue, alpha), где alpha — число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Пример
Prompt
Покажите четыре div-блока, используя значения цвета фона RGBA вместо свойства opacity. Используйте rgba(4, 170, 109, alpha) со значениями alpha 1.0, 0.6, 0.3 и 0.1. Включите текст внутри каждого блока, чтобы показать, что текст остаётся полностью непрозрачным.
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBA Transparency</title>
<style>
div {
padding: 10px;
}
</style>
</head>
<body>
<h2>Transparency using RGBA</h2>
<p>With RGBA, only the background becomes transparent, not the text:</p>
<div style="background: rgba(4, 170, 109, 1.0);"><p>100% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.6);"><p>60% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.3);"><p>30% opacity</p></div>
<div style="background: rgba(4, 170, 109, 0.1);"><p>10% opacity</p></div>
</body>
</html>
Текст в прозрачном блоке
Пример
RGBA для цвета фона блока поверх фонового изображения даёт прозрачный текстовый блок, текст которого остаётся читаемым.
Prompt
Создайте div с фоновым изображением (используйте klematis.jpg из PromptCookbook) и рамкой. Внутри него разместите ещё один div с полупрозрачным белым фоном, используя rgba(255, 255, 255, 0.6). Внутри прозрачного блока добавьте абзац с жирным чёрным текстом "Это некоторый текст, размещённый в прозрачном блоке."
Результат: полная HTML-страница "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text in Transparent Box</title>
<style>
div.background {
background: url(https://prompt-cookbook.com) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<h2>Text in Transparent Box</h2>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>