Как уменьшить непрозрачность фона элемента с помощью CSS?
Описание проблемы:
Возможно ли с помощью только CSS сделать так, чтобы фон элемента был полупрозрачным, а содержимое (текст и изображения) оставалось непрозрачным?
Я хотел бы достичь этого эффекта без необходимости разделять текст и фон на два отдельных элемента.
При попытке реализовать это, я использовал следующий код:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
Проблема в том, что дочерние элементы подвержены эффекту прозрачности своих родителей, поэтому opacity: 1 для span оказывается относительным к opacity: 0.6 у родительского элемента.
Есть ли способ реализовать нужный эффект, не разделяя содержимое и фон?
5 ответ(ов)
Это лучшее решение, которое я смог придумать, без использования CSS 3. Оно отлично работает в Firefox, Chrome и Internet Explorer, насколько я могу судить.
Создайте контейнер div и два дочерних div на одном уровне: один для содержимого, другой для фона. С помощью CSS автоматически подгоните размер фона под содержимое и разместите фон за содержимым, используя z-index.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* Эти три строки нужны для прозрачности во всех браузерах. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
<div class="container">
<div class="content">
Здесь содержимое.
<br/>Фон должен увеличиваться, чтобы соответствовать размеру.
</div>
<div class="background"></div>
</div>
Таким образом, фон будет иметь необходимую прозрачность и правильно адаптироваться под размер содержимого.
Проблема в том, что в вашем примере текст действительно имеет полную непрозрачность. Он полностью непрозрачен внутри тега p, но сам тег p полупрозрачный.
Вы можете добавить полупрозрачное изображение в формате PNG в качестве фона вместо реализации этого с помощью CSS, либо разделить текст и блок на два элемента и сместить текст над фоном (например, с помощью отрицательного отступа).
В противном случае это будет невозможно.
Как уже упоминал Крис: если вы используете PNG-файл с прозрачностью, вам придется применить обходной путь с использованием JavaScript, чтобы это работало в "непослушном" Internet Explorer...
Вот как я делаю это (возможно, это не самый оптимальный способ, но он работает):
Создайте div, который вы хотите сделать полупрозрачным. Присвойте ему класс или ID. Оставьте его пустым и закройте. Установите фиксированную высоту и ширину (например, 300 пикселей на 300 пикселей). Установите для него прозрачность 0.5 или любое другое значение, которое вам нравится, и задайте фоновый цвет.
Затем, непосредственно под этим div, создайте другой div с другим классом или ID. Внутри него создайте абзац, в который вы поместите свой текст. Задайте первому div свойство position: relative и top: -295px (это отрицательные 295 пикселей). Установите ему z-index равным 2 для надёжности и убедитесь, что его прозрачность равна 1. Стилизуйте ваш абзац по своему вкусу, но убедитесь, что его размеры меньше, чем у первого div, чтобы он не выходил за его пределы.
Вот и всё. Вот код:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}
<body>
<div class="trans">
</div>
<div class="trans2">
<p>
текст текст текст
</p>
</div>
</body>
Это работает в Safari 2.x, но насчет Internet Explorer не могу сказать.
CSS3 предоставляет простое решение вашей проблемы. Используйте:
background-color: rgba(0, 255, 0, 0.5);
Здесь rgba обозначает красный, зеленый, синий и альфа-канал. Зеленый цвет получается за счет значения 255, а полупрозрачность достигается с помощью альфа-значения 0.5.
Чтобы сделать фон элемента полупрозрачным, при этом сохранив содержимое (текст и изображения) полностью непрозрачным, необходимо использовать CSS. Вам нужно написать стиль для элемента и добавить свойство opacity с нужным значением.
Например:
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
Имейте в виду, что чем меньше значение opacity, тем более прозрачным будет фон. Значение 0 означает полную прозрачность, а 1 — полную непрозрачность. Таким образом, для эффекта полупрозрачного фона лучше выбирать значения, находящиеся между 0 и 1.
CSS непрозрачность фона [дублирование]
Получить координаты (X,Y) HTML-элемента
Как создать ненумерованный список без маркеров?
Стилизация кнопки input type="file"
Изменение цвета элемента hr