Как сделать прозрачный фон css

Как сделать прозрачный фон для текста или изображения с помощью CSS?

Возможно ли, используя только CSS, сделать background элемент полупрозрачным, но сделать его содержимое (текст и изображения) непрозрачным?

Я бы хотел добиться этого без использования текста и фона как двух отдельных элементов.

Похоже, что дочерние элементы подвержены непрозрачности своих родителей, так opacity:1 же как opacity:0.6 и родительские элементы .

Либо используйте полупрозрачное изображение PNG или SVG, либо используйте CSS:

В Firefox 3 и Safari 3 вы можете использовать RGBA, как упоминал Георг Шелли .

Малоизвестный трюк заключается в том, что вы можете использовать его и в Internet Explorer, используя фильтр градиента.

Первое шестнадцатеричное число определяет альфа-значение цвета.

Полное решение для всех браузеров:

Скриншоты, подтверждающие результаты:

Это при использовании следующего кода:

Хром-33IE11IE9IE8

Это лучшее решение, которое я мог придумать, НЕ используя CSS 3. И, насколько я могу судить, оно отлично работает в Firefox, Chrome и Internet Explorer.

Поместите контейнер div и два дочерних div объекта на один уровень: один для содержимого, другой для фона. И с помощью CSS автоматически измените размер фона, чтобы он соответствовал содержимому, и поместите фон фактически сзади с помощью z-index.

Для простого полупрозрачного цвета фона лучше всего подходят приведенные выше решения (изображения CSS3 или bg). Однако, если вы хотите сделать что-то более интересное (например, анимацию, несколько фонов и т. Д.), Или если вы не хотите полагаться на CSS3, вы можете попробовать «технику панелей»:

Техника работает с использованием двух «слоев» внутри элемента внешней панели:

  • один («задний»), который соответствует размеру элемента панели, не влияя на поток содержимого,
  • и один («продолжение»), который содержит контент и помогает определить размер панели.

На position: relative панели важно; он сообщает заднему слою, чтобы он соответствовал размеру панели. (Если вам нужно, чтобы <p> тег был абсолютным, измените панель с a <p> на a <span> и оберните все это <p> тегом с абсолютной позицией .)

Основное преимущество этого метода перед аналогичными, перечисленными выше, заключается в том, что панель не обязательно должна быть определенного размера; как указано выше, он будет соответствовать всей ширине (нормальный макет блочных элементов) и будет соответствовать только содержимому. Размер элемента внешней панели может быть любым, если только он прямоугольный (т.е. встроенный блок будет работать; простой старый встроенный — нет).

Кроме того, это дает вам много свободы для фона; вы можете поместить что-нибудь в задний элемент, и это не повлияет на поток контента (если вам нужно несколько полноразмерных подслоев, просто убедитесь, что у них также есть position: absolute, width / height: 100%, и вверху / внизу / слева / справа: авто).

Один из вариантов, позволяющий регулировать вставку фона (через верх / низ / лево / право) и / или закрепление фона (путем удаления одной из пар слева / справа или сверху / снизу), заключается в использовании вместо этого следующего CSS:

Как написано, это работает в Firefox, Safari, Chrome, IE8 + и Opera, хотя IE7 и IE6 требуют дополнительных CSS и выражений, IIRC, и в последний раз, когда я проверял, второй вариант CSS не работает в Opera.

На что следует обратить внимание:

  • Плавающие элементы внутри слоя cont не будут содержаться. Вам нужно убедиться, что они очищены или содержатся иным образом, иначе они выскользнут из-под дна.
  • Поля размещаются на элементе панели, а отступы — на элементе cont. Не используйте противоположное (поля на продолжении или отступ на панели), иначе вы обнаружите странности, такие как страница всегда немного шире, чем окно браузера.
  • Как уже упоминалось, все должно быть блочным или строчно-блочным. Не стесняйтесь использовать <div> s вместо <span> s для упрощения вашего CSS.

Более полная демонстрация, демонстрирующая гибкость этой техники за счет ее использования в тандеме display: inline-block и с обоими auto & конкретными width s / min-height s:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *