CSS-прозрачность только для фона, а не для текста на нем?
Проблема с настройкой прозрачности фона элемента в CSS
Здравствуйте!
У меня возникла проблема с изменением прозрачности фона элемента <div>
. Я хочу задать свойство opacity
только для фона, чтобы текст внутри остался непрозрачным.
Вот что я пробовал:
background: #CCC;
opacity: 0.6;
Однако это не приводит к желаемому результату — прозрачность также применяется и к тексту внутри <div>
, что делает его трудночитаемым.
Существует ли способ задать прозрачность только для фона элемента <div>
, не влияя на текст?
Заранее спасибо за помощь!
5 ответ(ов)
Самый простой способ сделать это — использовать два div: один для фона и один для текста. Вот пример кода:
#container {
position: relative;
width: 300px; /* Ширина контейнера */
height: 200px; /* Высота контейнера */
}
#block {
background: #CCC; /* Цвет фона */
filter: alpha(opacity=60); /* Для IE */
-moz-opacity: 0.6; /* Для Mozilla */
opacity: 0.6; /* Для CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%; /* Высота блока соответствует высоте контейнера */
width: 100%; /* Ширина блока соответствует ширине контейнера */
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Ширина текста соответствует ширине контейнера */
height: 100%; /* Высота текста соответствует высоте контейнера */
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
В этом примере мы используем контейнер (#container) для хранения обоих блоков. Блок с фоном (#block) имеет полупрозрачный фон, а текст (#text) находится поверх него. Вы можете изменить размеры контейнера и текст для своих нужд.
Мой способ заключается в том, чтобы создать прозрачный .png с нужным цветом и использовать background:url()
.
Для всех, кто наткнется на эту тему, вот скрипт под названием thatsNotYoChild.js, который я только что написал и который автоматически решает эту проблему:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Суть в том, что он отделяет дочерние элементы от родительского, но при этом сохраняет их в том же физическом положении на странице.
Отличный способ сделать это — использовать CSS3. Вот пример, как вы можете реализовать свой фон:
Сначала создайте div
с классом, например, supersizer
, вверху вашей страницы:
<div class="supersizer"></div>
Затем задайте следующие CSS-свойства:
.supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}
Эти настройки создадут фоновое изображение, которое будет охватывать весь экран и оставлять пространство для вашего контента над ним. Не забудьте, что z-index: -1;
позволяет вашему фону находиться за содержимым страницы.
Самое простое решение — создать 3 div
элемента. Один из них будет содержать остальные два: один с прозрачным фоном и другой с контентом. Задайте первому div
относительное позиционирование, а div
с прозрачным фоном установите с отрицательным z-index
. Затем отрегулируйте позицию контента так, чтобы он корректно располагался поверх прозрачного фона. Таким образом, у вас не возникнет проблем с абсолютным позиционированием.
Как уменьшить непрозрачность фона элемента с помощью CSS?
CSS непрозрачность фона [дублирование]
Стилизация кнопки input type="file"
Изменение цвета элемента hr
Использование подстановочного знака * в CSS для классов