|
Пример 3
BODY {
background: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat;
background-size:100%;
}
.block{
background-color: rgba(255, 228, 196, 0.88);
padding: 25px;
text-align:center;
}
В нашем магазине вы найдете все виды цветов.
Обратите внимание, что текстовый контент блока полностью виден (100% черный), в то время как фону задан альфа-канал равный 0,88, т.е. 88%.
На этом публикация подошла к концу. Подписывайтесь на мой блог и не забывайте приглашать друзей. Желаю удачи в изучении веб-языков! Пока-пока!
/* 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()
для изменения прозрачности от начального значения к конечному, или fadeOpacity.back()
для возврата к начальному значению уровня прозрачности.
Разжевываем
Как подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызывать методы плавного изменения прозрачности, нужно определить правила, по которым будет выполняться процесс: нужно определить начальную и конечную прозрачность, а также, при желании, указать параметр задержки, который влияет на скорость процесса смены прозрачности.
Правила определяются с помощью метода 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
свойства – opacity
и RGBA
. Свойство Opacity
отвечает только за прозрачность элементов, а функция RGBA
– за цвет и прозрачность, если указать значение прозрачности альфа-канала.
CSS прозрачность Opacity
Цифровое значение для opacity
задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот - абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity
распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.
Прозрачность через CSS Opacity
На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон. Div {
background: url(images/yourimage.jpg); /* Фон картинка */
width: 750px;
height: 100px;
margin: auto;
}
.blue {
background: #027ав4; /* Цвет полупрозрачного фона */
opacity: 0.3; /* Значение полупрозрачности фона */
height: 70px;
}
h1 {
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
} CSS прозрачность в формате RGBA
Формат для записи цвета RGBA
, является более современной альтернативой для свойства opacity
. R (red), G (green), B(blue)
– значит: красный, зеленый, синий. Последняя буква A
– означает альфа-канал, который и задает прозрачность. RGBA
в отличии от Opacity
не влияет на дочерние элементы.
Теперь давайте рассмотрим наш пример с использованием RGBA
. Заменим эти строчки в стилях. Background: ##027ав4; /* Цвет фона */
opacity: 0.3; /* значение полупрозрачности фона */
на следующую одну строку Background: rgba(2, 127, 212, 0.3);
Как вы видите значение прозрачности 0.3 совпадает у обоих методов.
Результат примера с RGBA:
Второй скриншот намного лучше смотрится, чем первый.
Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов. Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен. Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3
, реализовывался он чисто в графических программах.
Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer
, тогда добавляйте свойство filter
и не забудьте закомментировать, чтобы не пострадала валидность кода.
.blue {
background: rgba(0, 120, 201, 0.3);
filter: alpha(Opacity=30); /* Прозрачность в IE */
}
Вывод
Формат RGBA
поддерживают все современные браузеры, за исключением Internet Explorer
. Ещё очень важно, что RGBA
гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA
для получения прозрачности в CSS
.
Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти .
Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)
Эффект полупрозрачности
элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.
Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.
Рассмотрим полупрозрачность текста и фона - как правильно ее использовать в дизайне сайта:
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1. HTML 5 CSS 3 IE 9
opacity
body {
background: url(images/cat.jpg);
}
div {
opacity: 0.6;
background: #fc0; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
Создание и продвижение сайтов в интернете
В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.
Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета - синтаксис применения rgba. Полупрозрачный фон
HTML 5 CSS 3 IE 9
rgba
body { background: url(images/cat.jpg); }
div {
background: rgba(0, 170, 238, 0.4); /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
}
Создание и продвижение сайтов в интернете.
Значение непрозрачности для фона установлено 90% - полупрозрачный фон и непрозрачный текст.
CSS прозрачность - кросс-браузерное решение
- 3.8
out of
5
based on
6
votes
В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.
Как задать прозрачность любого элемента
В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.
Пример использования:
Прозрачность
.im {
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Кросс-браузерность прозрачности
Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.
Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.
Такой хороший:) браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х - это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 - это полная прозрачность, а 100 - полная непрозрачность.
Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.
Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.
Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:
filter: alpha(Opacity=50); /* Прозрачность для IE */
-moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */
-khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */
opacity: 0.5; /* Поддержка всех остальных браузеров */
Прозрачность различных элементов
Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.
CSS прозрачность картинки.
Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.
Прозрачность
.im1 {
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.im2 {
filter: alpha(Opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Результат:
Прозрачность на CSS при наведении курсора на картинку.
Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный - это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.
Прозрачность
.im1 {
filter: alpha(Opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.im1:hover {
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.im2 {
filter: alpha(Opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
.im2:hover {
filter: alpha(Opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
Результат можете посмотреть в демо.
Прозрачность фона на CSS.
Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.
В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.
Пример кода:
Прозрачность
BODY {
background: url(bg.png); /* Изображение в качестве фона */
}
.blok {
background: #FC0; /* Цвет фона */
padding: 5px; /* Внутренний отступ */
color: #000000; /* Цвет текста */
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Текст
Вот результа размещенного выше кода:
| 
