Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.
Способ 1 — значение transparentЕсли вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:
Color: transparent;
Такой текст нельзя будет увидеть на странице.
Способ 2 — цветовой режим rgbaА это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:
Background: rgb(230, 121, 156);
Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.
Background: rgba(0, 0, 0, 0);
В таком случае остальные 3 цифры особой роли не играют.
Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.
Способ 3 — opacityЕще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .
В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.
Прозрачный фон (background)Как вы возможно знаете, background – это css-свойство, которое позволяет задать цвет фона или загрузить изображение, которое будет выступать в качестве фонового.
Задаем прозрачность у css backgroundИтак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:
Background-color: rgba(173, 57, 22, 0.5)
Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.
Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.
Прозрачный фон на примереПреимущества полупрозрачного фона легко показать на примере. Например, у нас есть общий фон страницы. Вот так бы выглядел блок, если бы ему был задан сплошной черный цвет:
А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.
Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.
/* 06.07.2006 */
CSS прозрачность (css opacity, javascript opacity)Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим. Вдобавок рассмотрим готовое решение постепенного изменения прозрачности с помощью javascript.
CSS opacity (CSS прозрачность) CSS opacity симбиозПод симбиозом я подразумеваю объединение разных стилей для разных браузеров в одном CSS правиле для получения нужного эффекта, т.е. для реализации кросс-браузерности.
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 */ /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).
Javascript opacity симбиозТеперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.
Function setElementOpacity(sElemId, nOpacity) { var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью if (opacityProp=="filter") // Internet Exploder 5.5+ { nOpacity *= 100; // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+=" } else // Другие браузеры elem.style = nOpacity; } function getOpacityProperty() { if (typeof document.body.style.opacity == "string") // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 и младше, Firefox 0.8 return "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; return false; //нет прозрачности }
Функция принимает два аргумента: sElemId - id элемента, nOpacity - вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity.
Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE.
Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";
Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = "..."; ? Зачем используется "+=" для добавления в конец строки свойства filter ? Ответ прост, для того чтобы не "затереть" другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.
Плавное изменение прозрачности элементаГотовое решение. Используем библиотеку opacity.js
img {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
// Создаем правило изменения прозрачности: задаем имя правила, начальную и конечную прозрачность, а также необязательный параметр задержки влияющий на скорость смены прозрачности
fadeOpacity.addRule("oR1", .3, 1, 30);
fadeOpacity(this.id, "oR1")
" onmouseout="fadeOpacity.back(this.id)
" src="/img/strawberry.jpg" width="100" height="80" />
fadeOpacity(this.id, "oR1")
" onmouseout="fadeOpacity.back(this.id)
" src="/img/tomato.jpg" width="82" height="100" />
fadeOpacity(this.id, "oR1")
" onmouseout="fadeOpacity.back(this.id)
" src="/img/sweet_cherry.jpg" width="98" height="97" />
Как подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызывать методы плавного изменения прозрачности, нужно определить правила, по которым будет выполняться процесс: нужно определить начальную и конечную прозрачность, а также, при желании, указать параметр задержки, который влияет на скорость процесса смены прозрачности.
Правила определяются с помощью метода fadeOpacity.addRule
Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Аргументы:
- sRuleName - имя правила, задаётся произвольно;
- nStartOpacity и nFinishOpacity - начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
- nDelay - задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).
Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId).
:hover для простой смены прозрачностиЕщё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover , который позволяет определить стили для элемента, в момент наведения на него мыши.
a:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор:hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено).
Прозрачность и зазубренный текст в IEС выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType , а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст - bold , например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color , элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.
Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.
Способ 1 — значение transparentЕсли вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:
Color: transparent;
Такой текст нельзя будет увидеть на странице.
Способ 2 — цветовой режим rgbaА это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:
Background: rgb(230, 121, 156);
Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.
Background: rgba(0, 0, 0, 0);
В таком случае остальные 3 цифры особой роли не играют.
Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.
Способ 3 — opacityЕще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .
В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.
Прозрачный фон (background)Как вы возможно знаете, background – это css-свойство, которое позволяет задать цвет фона или загрузить изображение, которое будет выступать в качестве фонового.
Задаем прозрачность у css backgroundИтак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:
Background-color: rgba(173, 57, 22, 0.5)
Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.
Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.
Прозрачный фон на примереПреимущества полупрозрачного фона легко показать на примере. Например, у нас есть общий фон страницы. Вот так бы выглядел блок, если бы ему был задан сплошной черный цвет:
А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.
Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.
Влад Мержевич
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.
Блок с градиентомСделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.
Как сделать слой полупрозрачным?Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. В браузере Internet Explorer это свойство не работает, поэтому специально для него приходится использовать filter , свойство, не входящее в спецификацию CSS. В примере 1 показано, как установить прозрачность слоя для всех браузеров.
Полупрозрачный фонВлад Мержевич
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.
Как установить таблицу полупрозрачной, а часть ячеек нет?Для изменения прозрачности элемента в CSS3 предусмотрено свойство opacity , его значение может меняться от 0 до 1. Ноль соответствует полной прозрачности элемента, а единица, наоборот, непрозрачности. Современные браузеры вполне корректно работают с этим свойством за исключением браузера Internet Explorer, поэтому для него приходится использовать специальное свойство filter со значением alpha(Opacity=X) , где X может меняться от 0 до 100.
Вы хотите научиться создавать страницы с оригинальным и ярким современным дизайном? Применение полупрозрачных элементов способно помочь Вам в решении этой непростой задачи. Сегодня мы рассмотрим основные практические способы задания прозрачности структурных элементов.
Как задать прозрачность?Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:
- Свойство opacity .
- Использование PNG -картинки
- Формат системы RGBA
- Ну, и наконец, древность или клетчатые изображения.
Применение стилевого CSS
свойства оpacity
позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
< html> < head> < title> TODO supply a title < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Тут будет много Вашего текста
/* Фон для тела страницы */ } . prozrachen { padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50 %; /* Задаем ширину блока */ opacity: 0.7 ; /* Задаем прозрачность */ font: 48px/ 64px Times New Roman; text- align: justify; }
В результате мы получили полупрозрачный блок:
Важно!!!
filter: alpha(Opacity= 70 ) ;
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
- с абсолютным позиционированием (position: absolute )
- с фиксированным линейным размером (height или width ).
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
color: white;
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Использование PNG -картинкиИнтересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.
В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:
Важно!!!
Одним из самых современных методов изменения транспарантности фона является применение системы RGBA .
RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha -канала, характеризующего степень прозрачности.
background: rgba(r, g, b, a) ;
В уже известном нам примере, заменим содержимое в CSS файле на следующее:
body { background: url(./ vaden- pro- logo. png) ; /* Фоновый рисунок */ } . prozrachen { padding: 10px; background: rgba(0 , 206 , 209 , 0.7 ) ; margin: 0 auto; width: 50 %; font: 48px/ 64px Times New Roman; color: white; text- align: justify; }
Важно!!!
Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.
В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.
Важно!!!
- Под прозрачным блоком должна находиться яркая не однообразная картинка. На однотонном фоне изюминка прозрачности теряется.
- При выборе конкретного практического подхода, ориентируйтесь на то, какими браузерами пользуется ваша целевая аудитория. Кросс-браузерность – вещь важная.