Как сделать прозрачный цвет в html. Background прозрачность css – серый прозрачный фон
Прямым путём прозрачность фонового изображения (по крайней мере на 2016-ый год) никак через CSS (включая CSS 3) не установишь. Есть множество обходных способов решения данной проблемы.
Смешение фонов
Самым простым решением является смешнивание двух фонов (изображения и полупрозрачного цвета). Этот способ подойдёт если под "прозрачным фонововым изображением" однотипный фон т.к. это не прозрачность вовсе, а её имитация за счёт смешения изображения с цветом. Устанавливаете двойной фон состоящий из фонового изображения и нужного цвета с альфа-каналом. После этого выбираете наиболее подходящий режим смешивания и альфа-каналом цвета настраивате композицию до нужного результата.
Background: url("/images/img1.jpg"), rgba(255,255,255,0.9); background-blend-mode: color;
Добавление псевдоэлемента
Лучший способ достичь желаемого. Создаём псевдоэлемент при помощи псевдокласса after. Имеется
#main { position: relative; } #main:after { content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11/tandem.jpg); width: 100%; height: 100%; opacity: 0.2; z-index: -1; }
Сегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3. Перед тем, как перейти к rgba и hsla, рассмотрим примеры использования полупрозрачного фона для блока с текстом, а точнее то, как это достигается и какие проблемы возникают. Для демонстрации будем использовать вот эту картинку, обработанную какой-то программой на java, и линк на которую, к сожалению, был давно утерян.
Смотрим на картинку ниже. Имеется графический фон, на который требуется наложить полупрозрачный блок с текстом. В идеале должно быть то, что на рисунке под цифрой 2, но иногда может возникать то, что под цифрой 3. Есть ещё один дефект, но о нём упомяну словесно чуть ниже, т.к. отскриншотить его не было возможности.
Полупрозрачный фон без rgba и hsla
- Полупрозрачный PNG
. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И всё.
Недостатки : Только один – требуется . - Прозрачность через opacity
. Прозрачность блока задаётся кроссбраузерно следующим образом:
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;где 0,5 и 50 – это 50% прозрачности. Но есть проблема. Если мы зададим нужному нам блоку такую полупрозрачность, то мы увидим тот третий вариант на изображении выше – контент блока также станет полупрозрачным. Однако выход есть – свободное позиционирование, при помощи которого под блок текста кладётся другой блок, которому и задана полупрозрачность..
Рассмотрим пример. Пусть блок с оранжевой картинкой – это тег body, контейнер, в котором будет и текст и прозрачная подложка – #block_bg, внутри которого блок с полупрозрачным фоном #block_transparent, а блок с текстом – #block_text.
Текст текст текст, много-много текстаbody { background: url(image.jpg); }
#block_bg {
position: relative;
overflow: hidden;
width: 400px;
padding: 10px;
}
#block_text { position: relative; z-index: 100; }
#block_transparent {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 90;
height: 5000px;
width: 400px;
}Обращаю внимание, что необходимо задавать ширину прозрачного блока (строка 19), иначе он свернётся в 1 пиксел, и ширину общего блока (строка 5), иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаём ей высоту побольше (строка 18) и перекрытие для общего блока (строка 4).
Итак, мы запихнули всё в один блок, который можно пихать в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку block_bg, но лучше не стоит – осложните себе жизнь (в зависимости, конечно, от задачи). Иными словами, лучше всю эту конструкцию запихнуть в отдельный блок, которому задать паддинг и не мучиться.
Недостатки : Слишком громоздко.
rgb и hsl, rgba и hsla – свойства CSS3
Точнее это не совсем свойства – это новая возможность задавания цвета для таких свойств как background, color, border и т.д.
Название свойств пошли от цветовых систем RGB (Red, Green, Blue) и от HSL (Hue, Satutation, Lightness). Первая система описывает цветовое пространство посредством смешивания основных цветов – красного, зелёного и синего. Во второй системе компоненты цвета отображают информацию о цвете в более привычной для человека форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный?
rgb и rgba
Начнём с rgb и rgba. Значения r, g, b могут задаваться от 0 до 255 или от 0% до 100%. Значение a (alpha, прозрачность) измеряется от 0 до 1 (дробные значения задаются через точку – 0.4, 0.7 и т.д.). Если для r, g и b будут задаваться значения, превышающие их допустимый диапазон (например, 300 или 110% или -5), то они сократятся к ближайшему допустимому значению.
Рассмотрим всё на примере свойства background (хотя желающие могут взять color или border).
background: rgb(0, 0, 255); /*чисто синий цвет*/
background: rgb(100%, 50%, 0%); /*чисто синий цвет*/
background: rgb(10, 145, 500); /*будет распознано как 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*тоже самое, что и предыдущее*/
background: rgba(100, 50, 255, 0.1); /*очень прозрачный оттенок сиреневого*/
Да, забыл сказать, что нельзя между свойством и открывающей скобкой ставить пробел и нельзя задавать в одной строке одни значения в обычных числах, а другие в процентах. Если так сделаете – ничего не будет работать.
hsl и hsla
И несколько слов о hsl и hsla. Значение a задаётся также, как и у rgb и rgba, а с первыми тремя параметрами дело обстоит немного по другому. h задаётся от 0 до 360, а s и l – от 0% до 100%.
И самое главное. Если в rgb определить цвет из головы очень сложно (почти всегда необходима сторонняя программа с "пипеткой"), то здесь достаточно иметь одну картинку перед глазами, чтобы всё стало на свои места. Картинка показывает оттенки параметра h.
Чтобы прикинуть необходимый цвет, выбираем оттенок, затем прикидываем s, насыщенность цвета (где 0% – это ненасыщенный цвет (оттенок серого), а 100% – самая насыщенность) и его светлоту (0% – при нём цвет всегда будет чёрный, а при 100% - белый). Исходя из вышесказанного, на картинке показаны световые тона при насыщенности 100% и светлоте 50%.
Теперь всё цветовое пространство в голове как на ладони. Конечно ручной подбор не заменяет пипетку, да и не всем нужно в голове иметь "цветовое пространство", но иногда, чтобы быстро прикинуть что надо и потестить – оно подходит.
И буквально пара примеров
background: hsl(180, 100%, 50%); /*насыщенный голубой цвет*/
background: hsla(140, 50%, 30%, 0.5); /*полупрозрачный, едва заметно, что оттенок зелёного*/
Недостатки : все 4 свойства не поддерживаются ишаком и старыми браузерами.
Завершение
В общем, CSS3 даёт очередные очень полезные вещи, но как всегда, IE – основной тормоз прогресса. Для сайтов клиентов я бы пока воздержался от использования (ещё мозг зазря будут выносить) и брал бы вариант с PNG. А на своём сайте – почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.
Свойство opacity
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя , не получится. В табл. 1 показан вид текста и фона с разными значениями opacity .
В примере 1 показано создание полупрозрачного блока с использованием opacity .
Пример 1. Фон на веб-странице
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..
Рис. 1. Синтаксис применения rgba
В примере 2 показано применение формата RGBA для создания полупрозрачного фона.
Пример 2. Полупрозрачный фон
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.
Рис. 2. Полупрозрачный фон и непрозрачный текст
Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок css инструментами» вам как раз кстати. Ведь в текущем 2016 году внедрение в онлайн-сервисы различных прозрачных объектов считается стильным ходом.
Поэтому в этой статье я расскажу вам о всех существующих способах создания прозрачности, начиная от допотопных решений, сделаю акценты на совместимости решений с браузерами, а также приведу конкретные примеры программного кода. А теперь за работу!
Способ 1. Допотопный
Когда еще были слабые компьютеры и не развиты «способности» , девелоперы придумали свой способ создания прозрачного фона: использование прозрачных пикселей по очереди с цветными. Таким образом создаваемый блок при масштабировании выглядел как шахматная доска, однако в обычном размере он напоминал некую прозрачность.
Этот, по моему мнению, «костыль» конечно выручает в старых версиях браузеров, в которых не работают современные решения. Но стоит отметить, что качество отображения текста, вписанного в такой , резко падает.
Способ 2. Не замороченный
В редких случаях разработчики решают проблему с внедрением полупрозрачной картинки путем вставки…уже готовой полупрозрачной картинки! Для этого используются изображения, сохраненные в формате PNG-24. Данный графический формат позволяет задавать 256 уровней полупрозрачности.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Однако такой способ не удобен по нескольким причинам:
- Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
- Нельзя видоизменять цвета фона в css;
- Если в браузере отключена функция отображения изображений, то исчезнет.
Способ 3. Пропиаренный
Наиболее распространенный и всем известный способ сделать какой-либо блок прозрачным является свойство opacity .
Значение параметра варьируется в диапазоне , где при 0 объект невидим, а при 1 – отображается полноценно. Однако и здесь есть некие неприятные моменты.
Во-первых, все дочерние элементы наследуют прозрачность. А это значит, что вписанный текст также будет «просвечиваться» вместе с фоном.
Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity .
Для решения этой проблемы используется filter: alpha (Opacity=значение) .
Рассмотрим пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Способ 4. Современный
На сегодняшний день профессионалы пользуются инструментом rgba (r, g, b, a).
До этого я рассказывал, что RGB – это одна из популярных цветовых моделей, где R отвечает за все оттенки красного, G – оттенки зеленого и B – оттенки синего.
В случае с параметром css переменная A отвечает за альфа-канал, который в свою очередь отвечает за прозрачность.
Главное преимущество последнего способа – альфа-канал не затрагивает объекты, находящиеся внутри стилизованного блока.
rgba (r, g, b, a) поддерживается начиная с:
- 10 версии Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 версии Firefox.
Хочу отметить интересный факт! Горячо любимый Internet Explorer 7 выдает ошибку при сочетании свойства background-color с названием цветов (background-color: gold). Поэтому стоит использовать только:
background-color: rgba (255, 215, 0, 0.15)
А теперь пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
В нашем магазине вы найдете все виды цветов.
|
Обратите внимание, что текстовый контент блока полностью виден (100% черный), в то время как фону задан альфа-канал равный 0,88, т.е. 88%.
Вам понадобится
- - программа «Фотошоп»
- - изображение, у которого необходимо сделать полупрозрачный фон.
- - знать, как создавать новый слой
- - уметь пользоваться инструментом «Заливка», чертить фигуры в фотошопе
Инструкция
Щелкните дважды по названию слоя с картинкой и в появившемся поле напишите любое новое название этого слоя. Это нужно для свободного перемещения этого слоя и получения прозрачного фона при удалении частей рисунка. Если у изображения уже есть непрозрачный однородный фон, то выделите его инструментом «Волшебная палочка». Для этого выберите этот инструмент на панели инструментов и щелкните мышкой по цвету фона, после чего выделятся все указанного вами цвета (по которому был произведен щелчок мыши) в пределах замкнутой области. Удалите выделенное, нажав клавишу Delete.
Если неоднороден, то выделите саму картинку инструментом «Прямолинейное » или «Перо». В случае выделения изображения инструментом «Перо» выложите нужный контур и при необходимости отредактируйте его инструметом «Перо+». При редактировании этим инструментом вы можете добавлять опорные точки щелчком мыши созданного контура и, передвигая точки, менять его . Затем, не убирая курсор с контура, нажмите правую клавишу мыши и выберите «Образовать выделенную область». Растушевку установите на значение в 0 пикселей и поставьте галочку у параметра «Сглаживание». В результате этих действий контур будет преобразован в выделение. Удалите выделенное, нажав клавишу Delete.
Создайте новый слой и расположите его ниже слоя с картинкой. Наведя курсор на него, нажмите на левую клавишу мыши и, не отпуская кнопку, переместите курсор ниже слоя с изображением. Таким способом вы перетащите новый слой ниже слоя с картинкой. Ниже самого изображения создайте пока что непрозрачный фон нужного цвета и нужной фигуры.