Полупрозрачный фон

Повышение универсальности кода

Если же программист желает оптимизировать свой контент для более старых приложений, ему необходимо будет изучить дополнительные стили.

Для Internet Explorer версии 5.5 и выше воспринимаемым кодом является весьма длинная и некрасивая строчка — «filter:progid:DXImageTransform.Microsoft.Alpha(opacity=X)», где параметр прозрачности необходимо указывать уже не в долях от единицы, а в сотнях. Его максимальное значение, при котором прозрачность цвета CSS-объекта становится полной, составляет 100.

Собственный код существует и для менее популярных браузеров. Одним из таких является Konqueror, больше известный пользователям рабочей среды KDE на UNIX-подобных системах. Для него прозрачность CSS потребуется прописать параметром «-khtml-opacity: 0.X».

Для полной уверенности в оптимизации своего кода можно добавить строчку, обеспечивающую поддержку одних из первых версий браузеров Mozilla: «-moz-opacity: 0.X».

Выполнив подобную оптимизацию, web-мастер сможет добиться правильного отображения своего контента на большинстве пользовательских устройств.

Атрибуты opacity и filter

Атрибут opacity позволяет задать прозрачность фона — CSS свойство будет работать во всех браузерах. Значение устанавливается в пределах от 0.0 до 1.0 включительно. При этом вы можете установить прозрачность фона CSSбез целого значения: вместо 0.3 достаточно написать.3:

.block {background-image: url(img.png); opacity: .3;}.

Чтобы задать прозрачность фона, CSS которого подойдет даже для IE ниже девятой версии, используйте атрибут filter:

.block {background-image: url(img.png); filter: alpha(opacity=30);}.

В этом случае значение opacity устанавливается в пределах от 0 до 100. Учтите, что атрибут opacity отличается от настройки прозрачности с помощью RGBA наследственностью: при использовании opacity прозрачным становится не только фон, но и все элементы внутри блока.

Всегда следите за статистикой использования браузеров по СНГ и всем остальным странам. Самая большая проблема всех верстальщиков — старые версии IE, именно они не позволяют использовать в полной мере CSS3. При верстке не забывайте пользоваться специальными сервисами, которые проверяют, поддерживает ли ваш браузер какое-либо свойство CSS. Если вы не можете установить старые версии браузеров, найдите сервис, который проверит работу сайта в разных браузерах онлайн.

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов

Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен

Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3, реализовывался он чисто в графических программах.

Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer, тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.

Дополнение

Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:

Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.

Надеемся, что данная статья оказалась для Вас действительно полезной.

Удачи!

Здравствуйте уважаемые начинающие веб-мастера

Мы уже научились создавать фоновые изображения.

В этой статье поговорим о придании прозрачности изображениям, цвету, и тексту.

Для создания эффекта прозрачности в CSS применяются:

1. Формат RGBA — создаёт прозрачный цвет.

Аббревиатура RGBA включает в себя три цвета

а. R — red (красный);

б. G — green (зелёный);

в. B — blue (синий);

г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.

Записывается следующим образом:

color:rgba(120 40 200 0,4);.

2. Свойство CSS opacity — делает прозрачным любой элемент контента.

Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.

Записывается так:

opacity: 0.3;

Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.

Как видите, при подборе цвета, в правом нижнем углу, в соответствующих окнах, появляются цифры характеризующие выбранный цвет.

Остаётся только вставить эти цифры в формулу RGBA, и добавить число прозрачности.

Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.

И добавим в эту вьюгу, прекрасную представительницу холодного царства.

Как видно из результата, получилась какая то аппликация, а не картина.

Чтобы исправить ситуацию, картинке с представительницей холода, нужно задать прозрачность, чтоб она как бы слегка растворилась и слилась с общим фоном.

Прозрачность для изображений создаётся свойством css opacity, и значения его принимаются от 0 до 1.

Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.

Давайте зададим картинке прозрачность равную 0.1

Результат:

Как видите, у вьюги проявилось лицо.

В продолжение темы, на этом изображении можно поместить какой либо текст, и так же сделать его прозрачным, а можно оставить и не прозрачным, на Ваше усмотрение.

Для этого в html части кода, разместим тег p с текстом, а в таблице стилей, создадим селектор p, и зададим ему необходимые свойства.

Результат:

Вот так можно создавать изображения и снабжать их надписями. Принцип думаю понятен, остальное будет зависеть от Вашего творческого воображения и полёта фантазии.

Давайте создадим блок с фоном, и напишем в нём прозрачный текст.

Результат:

Вместо фона, можно вставить фоновое изображение и задать ему большую прозрачность, получится водяной знак.

Желаю творческих успехов.

Перемена

— Мама, мама! Вовка меня всю обрызгал! — А ты его тоже обрызгай. — Но, мама, как? Я же девочка!

— Официант! Почему в моей котлете волосы? — Понимаете, у нас повар однорукий, он котлеты на груди лепит, вот и налипли. — Представляю, чем он у вас перец фарширует!

Как сделать тень для текста, картинки, блока < < < В раздел > > > Как сделать блок с полосой прокрутки

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
5.5+	3.0+	9.2+	3.1+	3.0+	2.0+	1.0+

Решение

За управление прозрачностью элемента на странице отвечает стилевое свойство opacity, которое относится к CSS3. В качестве значения применяются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта.

Старые версии Internet Explorer не поддерживает opacity, поэтому для этого браузера следует использовать специфическое свойство filter со значением alpha(Opacity=X), где под X подразумевается целое число от 0 до 100. Это значение определяет уровень прозрачности: 0 — полная прозрачность; 100 — наоборот, непрозрачность объекта.

Соединяя воедино два свойства, получим универсальный код, который устанавливает заданную прозрачность для изображений (пример 1).

Пример 1. Полупрозрачное изображение

HTML5CSS 2.1CSS3IECrOpSaFx

Результат примера показан на рис. 1.

Рис. 1. Фотография с различными значениями прозрачности

В данном примере вначале приводится исходная фотография, к которой не применяются настройки прозрачности, последующие фотографии отображаются с уровнем непрозрачности 75%, 50% и 25%.

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 || 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 (+);/)>=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 || 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+, что и учтено в коде.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

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 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

CSS opacity (CSS прозрачность)

W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Пример (задана прозрачность 0.2, 0.5 и 1.0):

.img1 { opacity: 0.2; } .img2 { opacity: 0.5; } .img3 { opacity: 1.0; } /* Последнее правило можно не указывать, т.к. по умолчанию элемент и так полностью виден. */

Нравится? Да? Так что самое время подпортить настроение. Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.

Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):

.img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }/* синтаксис IE5.5+ (является предпочтительным) */ .img2 { filter: alpha(opacity=50); } /* синтаксис IE4 */

Для установки прозрачности через скрипт используем: object.style.filter = «progid:DXImageTransform.Microsoft.Alpha(строка параметров)». Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение «opacity=число от 0 до 100». Описание всех параметров смотрите на странице описания фильтра.

Атрибут background-color

В CSS цвет фона можно задать несколькими способами: с помощью шестнадцатеричного кода, названия цвета или RGB-записи. В CSS3 стало возможно использовать вместо RGB-записи вариант с RGBA.

Шестнадцатеричный код цвета записывается в свойстве после решетки: background-color: #FFDAB9. Если же символы в такой записи попарно совпадают, код обычно немного сокращают: #ccff00 можно записать как #cf0:

body {background-color: #cf0;}.

Название есть даже у самых экзотичных цветов. Например, помимо стандартных red и white вы можете использовать NavajoWhite (#FFDEAD) или Honeydew2 (#E0EEE0):

body {background-color: purple;}.

Последний вариант RGB или RGBA записи позволяет задавать не только цвет, но и прозрачность фона CSS, однако способ работает в IE только старше 9 версии. Остальные браузеры нормально распознают вариант с прозрачностью. По стандартам W3C предпочтительно использовать все-таки RGBA вместо более привычного RGB.

Последнее значение у RGBA и задает непрозрачность фона от 0 (прозрачный) до 1 (непрозрачный).

Есть еще некоторые необычные значения. Цвет фона можно задать с помощью HSL и HSLA. Оба были добавлены в CSS3, а потому не поддерживаются IE ниже 9 версии. Варианты идентичны RGB или RGBA, только в другом формате: Hue (оттенок — значение на цветовом круге, задается в градусах), Saturate (насыщенность — интенсивность цвета в процентах, от 0 до 100), Lightness (светлота — яркость, измеряется аналогично параметру Saturate).

Как убрать прозрачность дочернего элемента?

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность), то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

Код CSS

filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity: 1; Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс

.opacity :hover { filter:alpha(opacity=50);  /*  для IE 5.5+ */ -moz-opacity:0.5;  /* для Mozilla 1.6 и ниже */ -khtml-opacity:0.5;  /* для Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */ }

Атрибут background-repeat

Как правило, если фон задан изображением, он должен повторяться по горизонтали или вертикали. Для этого и используется атрибут background-repeat. Так, фон блока, CSS которого содержит такое свойство, может иметь один из нескольких параметров:

• no-repeat
  — изображение появляется на странице в единственном варианте;
• repeat
  — фон повторяется по осям x и y;
• repeat-x
  — только по горизонтали;
• repeat-y
  — только по вертикали;
• space
  — фон повторяется, но если пространство заполнить не получается, то между картинками появляются пустоты;
• round
  — изображение масштабируется, если не получается всю область заполнить целыми картинками.

Пример использования атрибута:

body {background-repeat: no-repeat repeat}
— аналогично background-repeat: repeat-y.

В CSS3 возможно задать значения для нескольких изображений, если перечислять параметры через запятую.

CSS и прозрачность элементов.

Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась.

В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами.

Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.

Старый подход

В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно, кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x, что, конечно, маловероятно.

В следующей строке используется свойство -moz-opacity, которое работало на очень ранних версиях движка Mozilla. Firefox прекратил его поддержку в версии 0.9.

CSS прозрачность в Firefox, Safari, Chrome и Opera

Для большинства современных браузеров достаточно использовать следующее свойство:

В приведённом примере, элементу устанавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим значение в единицу, то элемент будет непрозрачным, и, соответственно, установка этого значения в ноль, сделает его невидимым.

Свойством opacity обрабатывается 2 десятичных цифры. То есть значение «.01» будет отличаться от значения «.02», хоть это и мало заметно.

CSS прозрачность для Internet Explorer

Как обычно, Internet Explorer не дружит с остальными браузерами. К тому же у нас сейчас в довольно широком использовании три версии этого браузера, установка прозрачности в каждой из которых различна и иногда требует дополнительных усилий для получения положительного результата.

В этом примере используется свойство filter, которое работает в версиях 6-8, однако для версий 6 и 7 есть одно ограничение: у элемента свойство hasLayout должно быть установлено в true. Это свойство присутствует только в IE и подробнее о нём можно почитать, например, на Хабре.

Ещё один способ установить прозрачность используя CSS в IE8 — это использовать следующий подход (обратите внимание на комментарии):

Первая строка будет работать во всех сейчас используемых версиях, вторая же — только в IE8

Обратите внимание, что во второй строке используется префикс -ms-, а значение взято в кавычки

Установка и изменение CSS прозрачности с помощью JavaScript или jQuery

Вы можете использовать следующий код для установки прозрачности:

Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:

Вы можете анимировать это свойство:

Функция RGBA

В CSS3 планируется поддержка альфа-канала с помощью функции rgba. Эта функция работает в Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Используется она так:

В этом случае последний параметр указывает на уровень непрозрачности.

Функция HSLA

Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA, параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).

Подробнее об этой функции можно почитать на сайте W3.org.

Важный момент при использовании функций rgba и hsla — это то, что установка прозрачности не применяется к дочерним элементам, тогда как использование свойства opacity — наследуется.

Использование css-свойства opacity

Opacity является универсальным инструментом, и с его помощью вы можете задать желаемый уровень прозрачности в css как для любого элемента на странице, так и для фона.

Синтаксис свойства css:

opacity: значение;

где значение указывается в диапазоне от 0.0 (элемент полностью прозрачен) до 1.0 (элемент абсолютно не прозрачен).

Итак, для примера сделаем блок с классом fon, и для него зададим, для наглядности, фоновое изображение. В этом блоке разместим два блока с текстом opas1 и opas2, для которых зададим черный фон. После чего для второго блока зададим значение opacity равное 0.3.

Вот что получится:

Блок без прозрачности

Демонстрация работы свойства css opacity

HTML-код примера:

XHTML

<div class=»fon»>
<div class=»opas1″>
Блок без прозрачности
</div>
<div class=»opas2″>
Демонстрация работы свойства css opacity
</div>
<div>

1 2 3 4 5 6 7 8 9 10 11

<div class=»fon»> <div class=»opas1″> Блок без прозрачности </div>   <div class=»opas2″> Демонстрация работы свойства css opacity </div>   <div>

CSS-код:

CSS

.fon{
background:url(images/opacity1.jpg);
width:400px;
padding:30px;
margin:auto;
}
.opas1{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
}
.opas2{
width: 300px;
padding:30px;
background:#000;
margin:auto;
text-align:center;
opacity:0.3; /* уровень прозрачности в css*/
margin:10px;
font-size:18px;
color:#fff;
}

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 26 27 28 29

.fon{ backgroundurl(images/opacity1.jpg); width400px; padding30px; marginauto; }   .opas1{ width300px; padding30px; background#000; marginauto; text-aligncenter; margin10px; font-size18px; color#fff; }   .opas2{ width300px; padding30px; background#000; marginauto; text-aligncenter; opacity0.3;/* уровень прозрачности в css*/ margin10px; font-size18px; color#fff; }

Как видите, свойство css сработало, блок с классом opas2 стал прозрачным и через него проглядывается фоновое изображение.

Но здесь есть один неприятный момент. Как вы могли заметить, текст потускнел, то есть он тоже стал прозрачным. Это произошло из-за того, что все дочерние элементы блока, в нашем случае – текст, унаследовали прозрачность заданную в css.

Получается, что данное css-свойство мы можем использовать для придания прозрачности блоку на странице только в том случае, если он не содержит никакого текста.

А что же делать, если нам нужно задать в css прозрачность фона для блока, но при этом сохранить читабельность содержащегося в нем текста?

CSS:

.background {
text-align: center;
background: url(«background.jpg») top center;
padding: 120px 10px;
}
.transparent {
font-family: Tahoma, sans-serif;
font-weight: bold;
font-size: 50px;
line-height: 50px;
text-transform: uppercase;
background: #000;
color: #FFF;
mix-blend-mode: multiply;
padding: 10px 20px;
display: inline-block;
/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.background { text-aligncenter; backgroundurl(«background.jpg»)topcenter; padding120px10px; } .transparent { font-familyTahoma,sans-serif; font-weightbold; font-size50px; line-height50px; text-transformuppercase; background#000; color#FFF; mix-blend-modemultiply; padding10px20px; displayinline-block; /* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */ }

В итоге у нас получится это:

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive