Как отобразить текст поверх изображения без отображения цвета фона
tl;dr — Как избежать отображения цвета фона в тексте перед изображениями в CSS.
Фон
Сайт w3Schools для отображения текста поверх изображения (ссылка здесь) использует настройку относительного контейнера и абсолютного дочернего элемента. В обычных обстоятельствах это работает нормально (см. код и изображение ниже).
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>How to place text over an image:</p>
<div class = "container">
<img src = "img_snow_wide.jpg" alt = "Snow" style = "width:100%;">
<div class = "bottom-left">Bottom Left</div>
<div class = "top-left">Top Left</div>
<div class = "top-right">Top Right</div>
<div class = "bottom-right">Bottom Right</div>
<div class = "centered">Centered</div>
</div>
</body>
</html>
Однако, если в вашем файле установлен фоновый цвет, этот цвет фона будет проступать через элементы с абсолютным позиционированием (см. изображение кода ниже).
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
* {
background-color: black;
}
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>How to place text over an image:</p>
<div class = "container">
<img src = "img_snow_wide.jpg" alt = "Snow" style = "width:100%;">
<div class = "bottom-left">Bottom Left</div>
<div class = "top-left">Top Left</div>
<div class = "top-right">Top Right</div>
<div class = "bottom-right">Bottom Right</div>
<div class = "centered">Centered</div>
</div>
</body>
</html>
Вопрос
Как можно наложить текст на изображение без возникновения проблемы «проступания цвета фона»? Цель состоит в том, чтобы элементы с абсолютным позиционированием не имели цвета фона или были прозрачными (установка прозрачного цвета фона абсолютного элемента, похоже, не работает).
Я знаю, что элементы абсолютного позиционирования обрабатываются иначе, чем строчные элементы, но мне неясно, как решить эту проблему. Принятое решение для этого поста кажется работает, если попытаться установить для абсолютного элемента определенный цвет, но моя цель — не иметь цвета фона, чтобы перед изображением отображался только текст.
Ответы 2
Вы можете создать новый метод CSS (например, noBackground в моем фрагменте кода, применяемый в верхнем и центральном наложенном тексте) и применить его к каждому наложенному классу.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
*{
background-color: black;
}
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.noBackground {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>How to place text over an image:</p>
<div class = "container">
<img src = "https://www.w3schools.com/howto/img_snow_wide.jpg" alt = "Snow" style = "width:100%;">
<div class = "bottom-left">Bottom Left</div>
<div class = "top-left noBackground">Top Left</div>
<div class = "top-right noBackground">Top Right</div>
<div class = "bottom-right">Bottom Right</div>
<div class = "centered noBackground">Centered</div>
</div>
</body>
</html> На мой взгляд, не исправлять * выбрать все элементы — это ошибка. Не может быть веской причины изначально устанавливать черный фон всех элементов.
Я знаю @KIKOSoftware, но не все всегда черное или белое. Например, многие фреймворки по умолчанию используют CSS через скины, не позволяя удалить этот CSS. Не имея больше информации о пользовательском примере, я лишь предложил решение, максимально приближенное к его исходному коду. Конечно, если бы я разработал CSS с нуля, я бы никогда не использовал *
Да, сохранение исходного кода может быть хорошей идеей. Однако оригинал кажется просто копией примера w3Schools с добавленным элементом выбора *. Может быть, Джвок считает, что это правильный способ установить цвет фона веб-страницы?
Вы устанавливаете черный цвет фона всего (включая div). Если вы хотите изменить цвет фона тела, замените * на body:
body {
background-color: black;
}
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<h2>Image Text</h2>
<p>How to place text over an image:</p>
<div class = "container">
<img src = "https://www.w3schools.com/howto/img_snow_wide.jpg" alt = "Snow" style = "width:100%;">
<div class = "bottom-left">Bottom Left</div>
<div class = "top-left">Top Left</div>
<div class = "top-right">Top Right</div>
<div class = "bottom-right">Bottom Right</div>
<div class = "centered">Centered</div>
</div>
Если кто-то захочет дать объяснение отрицательным голосам, я буду признателен. Я понимаю, что источником проблемы была ошибка назначения цвета фона с помощью
*, но это кажется довольно простой ошибкой для начинающего разработчика шрифтов. Я также разделяю изображения и код, поэтому не понимаю, почему этот вопрос получил несколько отрицательных голосов.