Как сделать бэкграунд прозрачным
Полупрозрачный фон
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 вообще не отобразится.
Как сделать прозрачный фон в css
Дата публикации: 2016-03-30
От автора: приветствую вас на страницах блога webformyself. Сегодня я хотел бы вам рассказать, как можно сделать прозрачный фон. Css реализует такой прием очень легко, причем есть несколько вариантов, как это сделать.
Прозрачность в сайтостроении
Для начала стоит для себя уяснить, что цвет может быть полностью прозрачным (по сути, невидимым) и полупрозрачным. Это когда его немного видно, а через него могут быть видны другие элементы веб-страницы.
Как реализуется
Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Нужному элементу задаем такое правило и все будет работать. Второй вариант:
Цветовой режим rgba является усовершенствованной версией rgb, только тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полностью прозрачный цвет. Таким образом, rgba является отличной возможностью для задания полупрозрачного фона.
Зачем все это нужно?
Казалось бы, а почему цвет не установить как белый, и тогда его и так не будет видно? Да, но тут важно помнить, что по дизайну все сайты разные.
Если фоновый цвет всей страницы или отдельных крупных структурных блоков отличен от белого, то такой метод уже не подходит.
По умолчанию у блочного элемента при его создания нет явного фона, он полностью прозрачный. Убедиться в этом легко – создайте на пустой странице блок, определите ему какие-то размеры (ширину и высоту), больше ничего не задавайте. Увидите ли вы что-то на странице? Нет.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Полупрозрачность
Наверняка эта возможность интересует вас намного больше, потому что она позволяет добиваться интересных эффектов. Во-первых, таким образом можно добиться нужных оттенков, более мягких и приглушенных. Например, если записать в качестве цвета что-то вроде этого:
То получим достаточно яркий желтый цвет, что в целом в веб-дизайне не всегда приветствуется. Но если записать уже так:
Мы указали полупрозрачность, так что он стал намного более тусклым.
Также, если два полупрозрачных цвета накладываются друг на друга, то их свойства как бы складываются и в том месте где они наложились друг на друга, цвет немного отличается от изначального.
Прозрачный фон может пригодится там, где вы даже не думали. Например, стандартный способ создания треугольника через css заключается в том, чтобы блоку задать нулевую ширину и высоту, после чего указать с трех сторон прозрачные рамки, а с одной стороны выбрать такой цвет, который вам нужен. В итоге получаем треугольник.
В целом, это все что я хотел сказать вам сегодня об этом приеме. Дополнительные сведения о прозрачности вы можете найти в курсе по css3, а я на этом заканчиваю статью.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!
CSS прозрачность – просто о важном
О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин « CSS прозрачность » (или css opacity ) тоже на слуху. Чаще всего эта методика используется для решения дизайнерских задач (посредством верстки), улучшения юзабилити ресурса.
Что можно сделать при помощи данной технологии?
Используя прозрачность CSS, можно варьировать степень прозрачности как страницы в целом, так и отдельных ее частей:
Как задается прозрачность CSS: формальности
За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает « прозрачность »).
Данное свойство характеризуется следующими признаками:
Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:
Техническая сторона вопроса: задаем прозрачность фона
Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.
Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):
При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.
Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).
Видоизменяем код на такой:
Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.
Техническая сторона вопроса: задаем прозрачность блока
Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.
Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:
Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.
Дополнение
Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:
Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.
Надеемся, что данная статья оказалась для Вас действительно полезной.
Как сделать полупрозрачный фон в 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?
возможно ли, используя только CSS, сделать background полупрозрачного элемента, но имеют ли содержимое (текст и изображения) элемента непрозрачным?
Я хотел бы выполнить это без текста и фона в виде двух отдельных элементов.
похоже, что дочерние элементы подвергаются непрозрачности своих родителей, поэтому opacity:1 относительно opacity:0.6 из родитель.
27 ответов
либо используйте полупрозрачный PNG изображение или использование CSS3:
В Firefox 3 и Safari 3 Вы можете использовать RGBA как Георг Schölly упомянул.
малоизвестный трюк заключается в том, что вы можете использовать его в Internet Explorer, а также с помощью градиентного фильтра.
первое шестнадцатеричное число определяет Альфа-значение цвета.
полное решение всех браузерах:
скриншоты доказательство результатов:
Это при использовании следующего кода:
Это лучшее решение, которое я мог бы придумать, не используя CSS 3. И он отлично работает на Firefox, Chrome и Internet Explorer, насколько я могу видеть.
поместите контейнер DIV и два дочерних DIVs на одном уровне, один для содержимого, один для фона. И используя CSS, автоматический размер фона, чтобы соответствовать содержимому и поместить фон на самом деле в спину с помощью z-индекса.
просто откройте Photoshop создать 2×2 изображения пиксель (комплектации 1×1 может вызвать ошибку Internet Explorer!), заполните его зеленым цветом и установите непрозрачность на вкладке «слои» на 60%. Затем сохраните его и сделайте фоновое изображение:
это работает круто, конечно, кроме как в прекрасной Internet Explorer 6. Есть лучшие исправления, но вот быстрый взлом:
для простого полупрозрачного цвета фона вышеуказанные решения (изображения CSS3 или bg) являются лучшими вариантами. Однако, если вы хотите сделать что-то более причудливое (например, анимация, несколько фонов и т. д.), или если вы не хотите полагаться на CSS3, вы можете попробовать «технику панели»:
техника работает с помощью двух «слоев» внутри наружной панели элемента:
на position: relative на панели важна; он говорит задний слой, чтобы соответствовать размеру панели. (Если вам нужно
тег, чтобы быть абсолютным, измените панель с
до и оберните все это в абсолютно-положение
главным образом преимущество этот метод имеет над подобными одними перечисленными выше что панель не должна быть заданного размера; как указано выше, она будет соответствовать полной ширине (обычный макет блока-элемента) и только до содержимого. Внешний элемент панели может быть изменен любым способом, если он прямоугольный (т. е. встроенный блок будет работать; обычный встроенный не будет).
кроме того, это дает вам много свободы для фона; вы можете поместить действительно что-нибудь в задний элемент и не влиять на поток контента (если вы хотите несколько полноразмерных подслои, просто убедитесь, что они также имеют положение: Абсолют, ширина/высота: 100% и сверху/снизу/слева/справа: авто).
один вариант, чтобы разрешить настройку фоновой вставки (через верхний / нижний / левый/ правый) и/или закрепление фона (путем удаления одной из левых/правых или верхних/нижних пар), должен использовать следующий CSS:
как написано, это работает в Firefox, Safari, Chrome, IE8+ и Opera, хотя IE7 и IE6 требуют дополнительных CSS и выражений, IIRC и последний раз, когда я проверял, второй вариант CSS не работает в Opera.
вещи, чтобы следить за:
и вот live demo широко используемой техники: