10

CSS-прозрачность только для фона, а не для текста на нем?

9

Проблема с настройкой прозрачности фона элемента в CSS

Здравствуйте!

У меня возникла проблема с изменением прозрачности фона элемента <div>. Я хочу задать свойство opacity только для фона, чтобы текст внутри остался непрозрачным.

Вот что я пробовал:

background: #CCC;
opacity: 0.6;

Однако это не приводит к желаемому результату — прозрачность также применяется и к тексту внутри <div>, что делает его трудночитаемым.

Существует ли способ задать прозрачность только для фона элемента <div>, не влияя на текст?

Заранее спасибо за помощь!

5 ответ(ов)

0

Самый простой способ сделать это — использовать два 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) находится поверх него. Вы можете изменить размеры контейнера и текст для своих нужд.

0

Мой способ заключается в том, чтобы создать прозрачный .png с нужным цветом и использовать background:url().

0

Для всех, кто наткнется на эту тему, вот скрипт под названием thatsNotYoChild.js, который я только что написал и который автоматически решает эту проблему:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Суть в том, что он отделяет дочерние элементы от родительского, но при этом сохраняет их в том же физическом положении на странице.

0

Отличный способ сделать это — использовать 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; позволяет вашему фону находиться за содержимым страницы.

0

Самое простое решение — создать 3 div элемента. Один из них будет содержать остальные два: один с прозрачным фоном и другой с контентом. Задайте первому div относительное позиционирование, а div с прозрачным фоном установите с отрицательным z-index. Затем отрегулируйте позицию контента так, чтобы он корректно располагался поверх прозрачного фона. Таким образом, у вас не возникнет проблем с абсолютным позиционированием.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь