Как сделать полупрозрачный фон в html
Полупрозрачный фон
PNG в качестве фона
В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.
Рис. 1. Изображение для создания фона
Пример 1. Использование полупрозрачного рисунка
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 2. Применение фонового рисунка
Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.
Приведенный метод имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.
Клетчатое изображение
Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.
Рис. 3. Увеличенный клетчатый рисунок
Вот как в итоге это выглядит (рис. 4).
Рис. 4. Имитация полупрозрачности
Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.
Свойство opacity
Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).
Пример 2. Использование opacity
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Результат примера показан на рис. 5.
Рис. 5. Полупрозрачность текста и фона
Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.
background-color: rgba(r, g, b, a);
Пример 3. Использование RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Результат примера можно посмотреть на рис. 6.
Рис. 6. Полупрозрачный фон с непрозрачным текстом
Сравните картинку с предыдущей, буквы стали ярче и четче.
В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
Блог Vaden Pro
Способы создания прозрачных фонов
Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.
Как задать прозрачность?
Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:
CSS свойство Opacity
Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
В результате мы получили полупрозрачный блок:
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.
В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:
Формат системы RGBA
Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.
RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.
В уже известном нам примере, заменим содержимое в CSS файле на следующее:
Клетчатые изображения, или с уважением к истории
Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.
В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.
Подытожим?
Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:
Как сделать прозрачный фон в css
Дата публикации: 2016-03-30
От автора: приветствую вас на страницах блога webformyself. Сегодня я хотел бы вам рассказать, как можно сделать прозрачный фон. Css реализует такой прием очень легко, причем есть несколько вариантов, как это сделать.
Прозрачность в сайтостроении
Для начала стоит для себя уяснить, что цвет может быть полностью прозрачным (по сути, невидимым) и полупрозрачным. Это когда его немного видно, а через него могут быть видны другие элементы веб-страницы.
Как реализуется
Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Нужному элементу задаем такое правило и все будет работать. Второй вариант:
Цветовой режим rgba является усовершенствованной версией rgb, только тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полностью прозрачный цвет. Таким образом, rgba является отличной возможностью для задания полупрозрачного фона.
Зачем все это нужно?
Казалось бы, а почему цвет не установить как белый, и тогда его и так не будет видно? Да, но тут важно помнить, что по дизайну все сайты разные.
Если фоновый цвет всей страницы или отдельных крупных структурных блоков отличен от белого, то такой метод уже не подходит.
По умолчанию у блочного элемента при его создания нет явного фона, он полностью прозрачный. Убедиться в этом легко – создайте на пустой странице блок, определите ему какие-то размеры (ширину и высоту), больше ничего не задавайте. Увидите ли вы что-то на странице? Нет.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Полупрозрачность
Наверняка эта возможность интересует вас намного больше, потому что она позволяет добиваться интересных эффектов. Во-первых, таким образом можно добиться нужных оттенков, более мягких и приглушенных. Например, если записать в качестве цвета что-то вроде этого:
То получим достаточно яркий желтый цвет, что в целом в веб-дизайне не всегда приветствуется. Но если записать уже так:
Мы указали полупрозрачность, так что он стал намного более тусклым.
Также, если два полупрозрачных цвета накладываются друг на друга, то их свойства как бы складываются и в том месте где они наложились друг на друга, цвет немного отличается от изначального.
Прозрачный фон может пригодится там, где вы даже не думали. Например, стандартный способ создания треугольника через css заключается в том, чтобы блоку задать нулевую ширину и высоту, после чего указать с трех сторон прозрачные рамки, а с одной стороны выбрать такой цвет, который вам нужен. В итоге получаем треугольник.
В целом, это все что я хотел сказать вам сегодня об этом приеме. Дополнительные сведения о прозрачности вы можете найти в курсе по css3, а я на этом заканчиваю статью.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как сделать полупрозрачный фон в css
Дата публикации: 2016-03-08
От автора: приветствуем вас на нашем блоге, посвященном сайтостроению и веб-технологиям. В частности, сегодня мы поговорим о том, как сделать в css полупрозрачный фон и зачем это может быть нужно.
Полупрозрачность в веб-дизайне
В последнее время в сайтостроении активно применяются различные приемы, связанные с прозрачностью. Это позволяет создавать красивые шапки сайтов и множество различных декоративных элементов. Благодаря формату PNG-24 сегодня есть возможность вставлять на веб-страницу полупрозрачные изображения самых разных форм.
А что предусмотрено в самом css для использования полупрозрачных фонов? В последние годы в нем появилась возможность определять цвет текста или заднего плана в цветовом режиме rgba. Если вы работаете в графических редакторах, то наверняка знаете о нем. Цвет в rgba определяется так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Первые три значения записываются числовыми значениями от 0 до 255, где 255 – самая большая доля цвета. Прозрачность определяется по-другому – от 0 до 1. Если записать 0, то эффект будет такой же, как при background: transparent, то есть при полностью прозрачный фон.
Зачем все это нужно
Ну вот представьте, что вы определили для всей веб-страницы или отдельного блока какое-то фоновое изображение. Потом, если вы в этом родительском контейнере создадите новые блоки, то после определения оттенка для них изображение не будет видно на этих участках страницы.
Если же вам нужно, чтобы основной сплошной цвет просвечивался и через него было видно нашу картинку, то для этого и используется цветовой режим rgba. Например, я создам в html-документе два блока с произвольными идентификаторами.
Блоки идентичны друг другу во всем, кроме фона. Благодаря абсолютному позиционированию они стоят на одном и том же месте – в верхнем левом углу страницы, но поскольку блок #ct стоит в html-разметке последним, он полностью перекрывает своего товарища и на странице мы увидим просто желтый сплошной фон.
В то же время видим, что у #ab есть какая-то фоновая картинка, но мы ее не увидим, потом что у #ct не полупрозрачный фон и через него ничего не просвечивается. Все потому, что мы задали цвет в режиме rgb, а он не добавляет полупрозрачность, которая нам так нужна в данном случае. Давайте изменим стиль для #ct:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Обновляем страницу и видим вместо сплошного желтого более тусклый оттенок, а через него видно звездочки, которые и были фоновым изображением нашего блока #ab. Вот это и есть работа режима rgba.
Теперь давайте разбрем другой пример. Удалим один из блоков, а внутри оставшегося создадим дочерний элемент, которому тоже назначим свои стили.
Отцентрируем дочерний элемент, дадим фоновое изображение основному контейнеру и желаемый колер для блока внутри него. Опять же, из-за отсутствия полупрозрачности фон родителя не будет просвечиваться.
Теперь достаточно определить подходящий оттенок, который был бы схож с розовым (pink), только записать его в режиме rgba, добавим последним значением прозрачность. Переопределяем цвет фона для дочернего элемента:
Теперь, если обновить страницу, мы видим, что через цвет в дочернем блоке видно тот красивый орнамент, который задан для общего контейнера.
Где это может пригодиться в сайтостроении?
Хорошо, прием с полупрозрачностью мы с вами разобрали, а где он вообще применяется? Обычно его используют при создании так называемых масок у различных картинок, пунктов меню или товаров.
Наверняка вы видели на некоторых сайтах, как при наведении на элемент, на него как бы накладывался другой фон с каким-то содержимым. Но при этом если цвет этого накладываемого фона задать непрозрачным, то предыдущую картинку мы уже не увидим. Соответственно, это никуда не годится, поэтому используется полупрозрачный цвет, который и задают с помощью rgba.
Другим примером использования может быть тот, что вы могли видеть выше. У основного контейнера была красивая фоновая картинка. Соответственно, чтобы этот орнамент был виден и через фоновый цвет дочерних элементов, его также нужно записать в rgba.
Ну а как сделать полностью прозрачный фон в css? Выше я писал, что для этого можно записать свойство background: transparent, либо же задать 0 в качестве четвертого значения при записи цвета в режиме rgba. Другой прием – записать блоку свойство opacity со значением 0, но тогда весь блок будет прозрачным, то есть невидимым.
Больше информации вы можете узнать из нашего курса по css3, где есть соответствующий урок по полупрозрачности и свойству opacity. Смотрите и изучайте его, чтобы еще лучше разобраться в этих свойствах. На этом я заканчиваю статьи и желаю вам успехов в изучении веб-технологий. Оставайтесь с webformyself, чтобы узнавать еще больше.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как в CSS сделать слой полупрозрачного фона, не затрагивая текст
Дата публикации: 2020-11-12
От автора: давайте посмотрим, как с помощью CSS сделать слой полупрозрачного фона, не затрагивая текст.
Допустим, у вас есть изображение, подобное этому крабу, и вы хотите разместить его в пользовательском интерфейсе под текстом.
Но если вы просто поместите изображение позади текста, текст может быть трудночитаемым, поэтому вам также нужно добавить более темное полупрозрачное наложение поверх изображения, но за текстом. Давайте рассмотрим, как это сделать с помощью только CSS.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Базовые стили
Вот базовые стили нашего элемента. Они добавляют немного места сверху, снизу и по бокам. Они также выравнивают текст по центру элемента. Также добавим черный фон с белым текстом.
Теперь давайте продолжим и добавим фоновое изображение.
Добавление фонового изображения
В CSS мы укажем свойство background-image для добавления изображения. Мы также добавим background-position и background-size, чтобы центрировать изображение и растянуть его заполнить на весь контейнер.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Вы могли заметить, что часть текста трудно читается из-за того, что он расположен на вершине краба. Это проблема доступности и удобства использования. Давайте посмотрим, как это исправить.
Добавление наложения
Чтобы исправить это, мы добавим полупрозрачное черное наложение поверх изображения, но под текстом. Если вы включите в свойство background-image несколько элементов, они будут складываться в стек, причем первый элемент в списке будет наверху.
Мы собираемся добавить linear-gradient в background-image. Мы будем использовать объявление цвета rgba() с 0, 0, 0 для черного цвета. Затем мы будем используем 0.7 для альфа-канала (чтобы сделать наложение полупрозрачным).