Как сделать прозрачным только фон без текста css
Перейти к содержимому

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

  • автор:

CSS прозрачность

Сделать элемент HTML (например выпадающее меню) полупрозрачным.

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4

Решение

В стилях для нужного элемента задаем:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */

Теория

W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

  • filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); — для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант — filter: alpha(opacity=50);
  • -moz-opacity — для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
  • -khtml-opacity — для Safari 1.1 и Konqueror 3.1
Минусы

filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.

Возможные проблемы

Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */ zoom: 1; /* для элемента в ИЕ, у которого не заданы width и height */

update by Егор Скорняков может так же не работать, если применить к блоку с очень большими размерами (например, 9999x9999px).

Делаем полупрозрачный фон

При добавлении эффекта прозрачности элементу, все вложенные элементы тоже становятся прозрачными. Из-за этого могут возникнуть некоторые трудности, например, текст становится трудночитаемым. Для решения этой проблемы применяется метод с использование прозрачного фона. В качестве примера будем использовать выпадающее меню. HTML код:

.cssOpacityDiv2 < display: none; position: absolute; left: 0; top: 24px; width: 208px; overflow: hidden; /* обрезаем лишний фон */ >.cssOpacityDiv2 div < background: #990000; /* цвет фона меню */ opacity: 0.5; /* степень прозрачности */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* степень прозрачности для ие */ width: 100%; /* ширина раная ширине родительского блока */ height: 1000px; /* высоту задаем большую, т.к. не знаем заранее сколько пунктов меню будет */ position: absolute; z-index: 1; /* указываем явно уровень по z-оси, чтобы сделать меню выше */ top: 0; left: 0; >.cssOpacityUl < list-style: none; width: 208px; margin: 0; padding: 0; text-align: center; position: relative; /* для того чтобы указать уровень по z-оси */ z-index: 2; /* задаем уровень больше, чем о полупрозрачного фона */ >
  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4

Наведи на меня курсор

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4

По теме

  • Выпадающее меню на CSS
  • Полупрозрачное затемнение фона
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      Применение прозрачности только к фону div в CSS

      Чтобы управлять прозрачностью фонового изображения независимо от текста и других элементов блока, используйте псевдоэлементы CSS. Для этой цели подойдёт такой вариант CSS-конструкции:

      Скопировать код

      .div-background < position: relative; /* необходима для позиционирования псевдоэлемента */ >.div-background::after < content: ""; /* создаём служебный элемент */ background: url('your-image.png'); /* определяем путь до изображения */ opacity: 0.5; /* устанавливаем требуемый уровень прозрачности */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; /* размещаем псевдоэлемент под основным слоем */ >

      Псевдоэлемент ::after действует как отдельный прозрачный слой с фоновым изображением, позволяя регулировать его прозрачность без влияния на остальной контент блока.

      Использование linear-gradient и rgba: изящное решение

      Для задания прозрачности фоновому изображению вы также можете использовать функцию linear-gradient с параметрами rgba :

      Скопировать код

      .div-background < background: linear-gradient( rgba(0, 0, 0, 0.5), /* последний параметр регулирует прозрачность */ rgba(0, 0, 0, 0.5) ), url('your-image.png'); background-size: cover; /* обеспечивает полное заполнение пространства фоном */ >

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

      Совместимость с браузерами: стратегия поддержки старых версий

      В случае необходимости поддержки устаревших браузеров, например IE6, можно использовать разметку с дополнительным div:

      Скопировать код
      Скопировать код

      .div-background < position: relative; >.bg-image < background: url('your-image.png'); opacity: 0.5; /* устанавливаем прозрачность */ position: absolute; height: 100%; width: 100%; z-index: -1; >.content < position: relative; z-index: 1; /* текст размещен поверх фонового изображения */ >

      Предложенная стратегия позволяет чётко разделить фоновое изображение и текстовое содержимое с помощью дополнительного контейнера, обеспечивая совместимость со всеми современными и старыми версиями браузеров.

      Визуализация

      Рассмотрим случай, когда требуется сделать прозрачным только фоновое изображение блока:

      Скопировать код

      .div-background < background: url('your-image.png'); opacity: 0.5; /* задаём полупрозрачность */ >

      Этот CSS код повлечет за собой полупрозрачность всего блока, включая весь текст и другие элементы.

      В примере решения с использованием псевдоэлемента ситуация выглядит иначе:

      Скопировать код

      .div-background::after < content: ""; background: url('your-image.png'); opacity: 0.5; /* создаём эффект полупрозрачности */ top: 0; left: 0; right: 0; bottom: 0; position: absolute; /* псевдоэлемент позиционируется абсолютно */ z-index: -1; >

      Применение свойства opacity к псевдоэлементу ::after дает возможность контролировать прозрачность исключительно фонового слоя, не затрагивая текст и другие элементы.

      Практические советы для эффективной реализации

      1. Стратегия позиционирования фона: Настройте параметры background-size и background-position для оптимального размещения и масштабирования фоновой картинки.
      2. Применение z-index: Используйте z-index для создания различных слоёв и расположения прозрачного фона за содержимым.
      3. Выбор псевдоэлемента: «before» и «after» предлагают одинаковые возможности. Выбирайте любой из них, в зависимости от конкретных условий.
      4. Использование RGBA: С помощью RGBA вы получаете больше контроля над цветом и прозрачностью благодаря включенному альфа-каналу.
      5. Значимость практики: Рекомендуется использовать платформы, такие как jsFiddle, для наглядных экспериментов, где можно моментально тестировать и видеть результаты изменений в коде.

      Полезные материалы

      1. background-blend-mode – CSS: Каскадные таблицы стилей | MDN — Подробное объяснение работы background-blend-mode .
      2. css – Это возможно задать фоновой картинке прозрачность? – Stack Overflow — Обсуждение на Stack Overflow на тему сочетания фоновых изображений и прозрачности.
      3. Как создать изображение с прозрачным текстом на w3schools.com — Пошаговое руководство по созданию прозрачности на изображениях.
      4. Пример в реальном времени. на codepen.io — Интерактивный пример для тестирования прозрачности фона в CSS.
      5. Введение в прозрачность и RGBA – CSS3 . Info — Основы прозрачности и RGBA.
      6. Как изменить прозрачность фонового изображения в CSS на DigitalOcean — Урок по изменению прозрачности фоновых изображений в CSS.

      Сила цветовой CSS-функции rgba()

      Одна из наиболее интересных мне вещей в CSS — новая функция color-mod. Она позволит нам манипулировать цветами прямо в браузере. Например, при наведении на кнопку мы сможем изменить её цвет примерно так — color: color(black darkness(50%)); , не используя препроцессоры вроде Sass.

      Но пока поддержка таких CSS-функций не реализована, мы можем временно использовать PostCSS для их компиляции в обычные цвета. Или мы можем поэкспериментировать и исследовать силу функции rgba() , чтобы менять цвета на лету! Давайте посмотрим, как её можно использовать.

      Как это работает

      Как это работает. Часть 1.

      Когда в графическом редакторе мы помещаем чёрный и белый блоки над большим синим блоком (как в примере), то в результате получаем, соответственно, более светлый или более тёмный синий цвет.

      Это происходит потому, что при увеличении прозрачности цвета будут смешиваться на основе того, белый это или чёрный. Знаете, что произойдет, если изменить синий фон на зелёный? Верно!

      Как это работает. Часть 2.

      Как видите, при изменении цвета фона маленькие блоки стали выглядеть иначе: мы получили светлый и тёмный зелёный. Также мы можем изменить значение прозрачности, чтобы выбрать более светлый или тёмный оттенок. Давайте отработаем этот базовый навык, чтобы перейти к реальным примерам.

      Применение концепции

      Чтобы сохранить лаконичность предыдущего примера, поиграем с прозрачностью. В реальном дизайне нам может понадобиться альфа-значение rgba() .

      .header < background: rgba(0, 0, 0, 0.5); /* Чёрный с непрозрачностью 50% */ > 

      Здесь мы взяли background вместо opacity , потому что при использовании opacity будут затронуты все потомки, а нам это не нужно. Если мы используем альфа-канал для свойства background , мы обеспечиваем изменение только нужного элемента.

      Примечание: в демо для скорости мы будем использовать rgba() -функции Sass. Например:

      .elem < background: rgba(white, 0.5); > 
      .elem < background: rgba(255, 255, 255, 0.5); > 

      Оформление шапки сайта

      Первый вариант использования rgba() — это стилизация шапок веб-приложений. В Trello используются цвета фона с rgba() для дочерних элементов шапки (логотип, поле поиска, кнопки):

      .search < background: rgba(255, 255, 255, 0.5); /* Белый с 50% альфа-каналом */ > 

      Devtools в Trello

      Так мы получим возможность стилизовать шапку, меняя только её фон, и вместе с фоном будут изменены дочерние элементы.

      В нашем примере мы можем сделать что-то похожее на шапку Trello и поиграть с фоном через панель разработки.

      Шапка Trello

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

      Шапка статьи

      В этом примере использование rgba() будет полезно для:

      • Рамки верхнего и нижнего краёв
      • Цвета фона отцентрованной обёртки
      • Цвета фона ссылок категории

      Заголовок статьи с комментариями

      .parent < background: #5aaf4c; /* фон родителя */ box-shadow: inset 0 8px 0 0 rgba(255, 255, 255, 0.5), inset 0 -8px 0 0 rgba(255, 255, 255, 0.5); /* верхняя и нижняя рамки */ > .contain < background: rgba(0, 0, 0, 0.1); > .category < background: rgba(255, 255, 255, 0.5); > 

      Кнопки

      В темах для кнопок мы можем использовать rgba() для создания эффектов по наведению или фокусу через рамки и тени.

      .button < background: #026aa7; box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.2); > .button:hover < box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.6), 0 0 8px 0 rgba(0, 0, 0, 0.5); > .button:focus < box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2); > 

      Градиенты

      Другой полезный приём — это заливка фона сплошным цветом и добавление псевдоэлемента с rgba() -цветами для точек перехода цветов градиента.

      Градиенты

      .elem < background: green; > .elem:before < content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7)); > 

      Это также даёт нам возможность анимировать градиенты изменением одного только цвета фона.

      .elem < /* остальные стили */ animation: bg 2s ease-out alternate infinite; > @keyframes bg to < background: green; > > 

      Вложенный элемент

      Если у нас есть навигация списком в шапке, мы можем добавить для неё цвет фона с rgba() . Это сделает фон немного прозрачным, поэтому он будет смешиваться с фоном родителя.

      То же может использоваться для создания динамических эффектов при наведении:

      Тёмные/светлые вариации цветовой схемы

      Мы можем использовать эту идею для генерации различных оттенков определённой цветовой палитры через размещение псевдоэлемента над каждым цветным блоком с определённым значением rgba() .

      Эффекты изображения

      Чтобы сделать изображение темнее или светлее, мы можем использовать псевдоэлемент с rgba() -фоном.

      Примеры эффектов

      При использовании цветного фона мы можем создавать оттенки цвета. Кроме этого, мы можем использовать свойство mix-blend-mode , чтобы смешать фон с изображением для получения разных эффектов.

      Важно проверить поддержку mix-blend-mode браузерами перед использованием:

      .elem:before < background: rgba(0, 0, 0, 1); mix-blend-mode: color; > 

      Если mix-blend-mode не поддерживается, изображение будет чёрным, и пользователь не сможет его увидеть. Лучше использовать этот эффект как прогрессивное улучшение, но не полагаться на него. В этом может помочь @support или Modernizr.

      @supports (mix-blend-mode: color) < /* здесь будут ваши расширенные стили */ > 

      Создание тем с CSS-переменными

      Когда вы используете CSS-переменные (кастомные свойства) для родительских элементов, при изменении переменной меняются ещё и все дочерние элементы. Например:

      :root < --brand-color: #026aa7; > /* Проверка поддержки CSS-переменных */ @supports (--color: red) < .elem < background: var(--brand-color); > > var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"]; var colorOptions = document.querySelectorAll(".option"); var colorLabels = document.querySelectorAll(".option + label"); for (var i = 0; i < colorOptions.length; i++) < /* Добавим слушателя события на каждую радио-кнопку */ colorOptions[i].addEventListener('click', changeColor); /* Добавим значение каждой радио-кнопке из массива colors[] */ colorOptions[i].value = colors[i]; colorLabels[i].style.background = colors[i]; > function changeColor(e) < /* Вызовем корневой элемент и установим значение определённого свойства. В нашем случае: --brand-color */ document.documentElement.style.setProperty('--brand-color', e.target.value); > 

      Сочетая CSS-переменные и rgba() , мы можем делать раскладки и цвета более динамичными без переопределения нового цвета для каждого элемента.

      Что нужно принимать во внимание

      Запасной цвет

      Хотя глобальная поддержка CSS-цветов составляет примерно 97.39%, важно обеспечить запасной вариант для браузеров, в которых они не поддерживаются.

      .elem < background: #fff; background: rgba(255, 255, 255, 0.5); /* браузеры без поддержки проигнорируют эту декларацию */ > 

      Проверка контрастности цвета

      Мы должны обеспечивать между элементами контраст, соответствующий гайдлайнам доступности. Иногда при использовании rgba() может получиться цвет, который будет резать глаза, но вы можете использовать инструменты вроде проверки контраста от Lea Verou и определить, соответствуют ли цвета стандартам доступности.

      © 2013 Frontender Magazine

      Кроме материалов, опубликованных под лицензией Creative Commons

      Как сделать прозрачность фона в CSS

      прозрачный фон css

      В этой статье я хотела бы с вами поговорить о таком достаточно интересном эффекте, как прозрачность для различных элементов на сайте, а точнее, как задать с помощью CSS прозрачность фона или любого другого блока на странице сайта.

      Навигация по статье:

      • Использование css-свойства opacity
      • Задание фона в RGBA

      Приступая к созданию своего сайта, всегда хочется сделать его дизайн интересным и индивидуальным. Существует большое количество специальных эффектов, приемов работы и различных хитростей, используя которые можно достичь желаемого дизайна. Так, в частности используя возможности CSS3 можно добиться действительно впечатляющих результатов.

      Благодаря CSS прозрачность фона можно реализовать двумя наиболее простыми способами:

      1. 1. Используя CSS-свойство opacity.
      2. 2. Используя формат RGBA для задания фона.

      Использование css-свойства opacity

      Opacity является универсальным инструментом, и с его помощью вы можете задать желаемый уровень прозрачности в css как для любого элемента на странице, так и для фона.

      Синтаксис свойства css:

      opacity: значение;

      где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).

      Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.

      Вот что получится:

      Блок без прозрачности
      Демонстрация работы свойства css opacity
      Блок без прозрачности
      Демонстрация работы свойства css opacity
      background : url ( images/opacity1.jpg ) ;
      width : 400px ;
      padding : 30px ;
      margin : auto ;
      width : 300px ;
      padding : 30px ;
      background : #000 ;
      margin : auto ;
      text-align : center ;
      margin : 10px ;
      font-size : 18px ;
      color : #fff ;
      width : 300px ;
      padding : 30px ;
      background : #000 ;
      margin : auto ;
      text-align : center ;
      opacity : 0.3 ; /* уровень прозрачности в css*/
      margin : 10px ;
      font-size : 18px ;
      color : #fff ;

      Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.

      Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.

      Получается, что данное css-свойство мы можем использовать для придания прозрачности блоку на странице только в том случае, если он не содержит никакого текста.

      А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?

      Задание фона в RGBA

      Избежать этой проблемы мы сможем в том случае, если откажемся от использования opacity и зададим значение для css-свойства background в формате RGBA.

      Формат RGBA дает нам возможность задать значение цвета, используя значение красного, зеленого, а так же синего цветов в десятичном виде, а так же, позволяет задать прозрачность при помощи использования альфа-канала. Уровень альфа-канала задается в интервале от 0 до 1. То есть, так же как и в css-свойстве opacity.
      Например так:
      background:rgba(255,255,255,0.6);

      Для наглядности добавим в блок с фоном еще один элемент с текстом, для которого зададим в css фон в формате RGBA с уровнем прозрачности 0.3.

      Вот что у нас получилось:

      Блок без прозрачности
      Демонстрация работы css-свойства opacity
      Так выглядит фон с RGBA

      В код страницы был добавлен следующий фрагмент HTML-кода:

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

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