Прозрачность изображения в CSS
Свойство opacity задаёт, насколько прозрачен элемент.
Свойство opacity принимает значение от 0.0 до 1.0:
- 0.0 — элемент полностью прозрачен
- 0.5 — элемент прозрачен на 50%
- 1.0 — значение по умолчанию; элемент полностью видим
Совет: см. главу Фильтры изображений CSS, чтобы узнать, как использовать свойство filter для добавления визуальных эффектов, таких как прозрачность, размытие и насыщенность, к изображениям.
Пример
Установите прозрачность изображения равной 0.5, чтобы сделать его на 50% прозрачным.
Prompt
Создайте страницу, отображающую три изображения леса рядом друг с другом, каждое с разным значением CSS opacity: 0.2, 0.5 и 1.0. Подпишите под каждым изображением его значение прозрачности.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Opacity</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 20px;
align-items: flex-start;
}
.container div {
text-align: center;
}
.container img {
width: 200px;
height: auto;
}
.img1 {
opacity: 0.2;
}
.img2 {
opacity: 0.5;
}
.img3 {
opacity: 1.0;
}
</style>
</head>
<body>
<h2>Image Opacity</h2>
<div class="container">
<div>
<img class="img1" src="img_forest.jpg" alt="Forest">
<p>opacity 0.2</p>
</div>
<div>
<img class="img2" src="img_forest.jpg" alt="Forest">
<p>opacity 0.5</p>
</div>
<div>
<img class="img3" src="img_forest.jpg" alt="Forest">
<p>opacity 1.0 (default)</p>
</div>
</div>
</body>
</html>
Позиционирование текста на изображении
Вы можете использовать позиционирование CSS, чтобы разместить текст поверх изображения в разных местах.
Слева сверху
Позиционирование текста в верхнем левом углу изображения.
Prompt
Создайте страницу с широким пейзажным изображением внутри контейнера с position relative. Разместите белый текст «Вверху слева» в верхнем левом углу изображения с помощью абсолютного позиционирования.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Top Left</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 8px;
left: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Top Left</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Top Left</div>
</div>
</body>
</html>
Справа сверху
Позиционирование текста в верхнем правом углу изображения.
Prompt
Создайте страницу с широким пейзажным изображением внутри контейнера с position relative. Разместите белый текст «Вверху справа» в верхнем правом углу изображения с помощью абсолютного позиционирования.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Top Right</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 8px;
right: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Top Right</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Top Right</div>
</div>
</body>
</html>
Слева снизу
Позиционирование текста в нижнем левом углу изображения.
Prompt
Создайте страницу с широким пейзажным изображением внутри контейнера с position relative. Разместите белый текст «Внизу слева» в нижнем левом углу изображения с помощью абсолютного позиционирования.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Bottom Left</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
bottom: 8px;
left: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Bottom Left</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Bottom Left</div>
</div>
</body>
</html>
Справа снизу
Позиционирование текста в нижнем правом углу изображения.
Prompt
Создайте страницу с широким пейзажным изображением внутри контейнера с position relative. Разместите белый текст «Внизу справа» в нижнем правом углу изображения с помощью абсолютного позиционирования.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Bottom Right</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
bottom: 8px;
right: 16px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Bottom Right</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Bottom Right</div>
</div>
</body>
</html>
По центру
Позиционирование текста по центру изображения.
Prompt
Создайте страницу с широким пейзажным изображением внутри контейнера с position relative. Разместите белый текст «По центру» точно в центре изображения с помощью абсолютного позиционирования и transform translate.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Text - Centered</title>
<style>
body {
font-family: Arial, sans-serif;
}
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
max-width: 800px;
height: auto;
display: block;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Image Text - Centered</h2>
<div class="image-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="text">Centered</div>
</div>
</body>
</html>