CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью.

Opacity в Firefox, Safari, Chrome, Opera и IE9

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

p {
    opacity: 0.7;
}

Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%).

Свойство opacity принимает значение от 0.0 до 1.0. Настройка opacity: 1; сделает элемент полностью непрозрачным (то есть 0% прозрачным), тогда как opacity: 0; сделает элемент полностью прозрачным (то есть 100% прозрачным).

Opacity в Internet Explorer 8 и ниже

Internet Explorer 8 и более ранняя версия поддерживает только свойство Microsoft "alpha filter" для контроля прозрачности элемента.

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

Альфа-фильтры в IE принимают значения от 0 до 100. Значение 0 делает элемент полностью прозрачным (т.е. 100% прозрачным), тогда как значение 100 делает элемент полностью непрозрачным (то есть 0% прозрачным).

Opacity в разных браузерах

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

p {
    opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;  /* Fix for IE7 */
}

Включение alpha filter для управления прозрачностью в Internet Explorer 8 и более ранних версиях создает недопустимый код в таблице стилей, поскольку это свойство только для Microsoft, а не стандартное свойство CSS.

Opacity для изображений

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

Все три изображения на иллюстрации ниже взяты из одного исходного изображения. Единственные различия между ними — уровень их непрозрачности.

0% Opaque Image 50% Opaque Image 25% Opaque Image
opacity:1 opacity:0.5 opacity:0.25

Изменение opacity при наведении мыши

В следующем примере демонстрируется распространенное использование непрозрачности изображения CSS — когда непрозрачность изображений изменяется при наведении указателя мыши на изображение.

Opaque snail Opaque tortoise Opaque octopus

Наведите указатель мыши на изображения, чтобы увидеть эффект.

Текст в прозрачном поле

При использовании свойства opacity не только фон элемента, но и все его дочерние элементы также становятся прозрачными. Это затрудняет чтение текста внутри прозрачного элемента, если значение непрозрачности становится выше.

OPACITYOPACITYOPACITYOPACITY

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

div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
}
p {
    float: left;
    position: relative;
    margin-left: -400px;
}

Прозрачность с использованием RGBA

В дополнение к RGB CSS3 представил новый способ — RGBA (Red Blue Green Alpha) для указания цвета, который включает альфа-прозрачность как часть значения цвета.

Указание цвета в формате RGBA — это очень простой способ установить прозрачность.

div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

Первые три числа, представляют цвет в значениях RGB, т.е. красный (0-255), зеленый (0-255), синий (0-255), а четвертое, представляет значение альфа-прозрачности в диапазоне от 0.0 до 1.0 (0 делает цвет полностью прозрачным, тогда как значение 1 делает его полностью непрозрачным).

Одна важная характеристика, которую следует отметить в отношении прозрачности RGBA, — это способность контролировать прозрачность отдельных значений цвета элементов. С помощью RGBA мы можем сделать цвет текста элемента прозрачным и оставить фон без изменений.

RGBARGBARGBARGBA

Или измените только прозрачность фона.

RGBARGBARGBARGBA

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

Прозрачность RGBA не влияет на дочерние элементы, как свойство opacity. Альфа-значение RGBA влияет на прозрачность отдельных значений цвета, а не всего элемента.

Объявление запасного цвета

Не все браузеры поддерживают цвета RGBA. Тем не менее, вы можете предоставить альтернативу, такую как сплошной цвет в формате RGB или прозрачное изображение PNG для браузеров, которые не поддерживают свойство RGBA.

p {
    /* Резервный вариант для веб-браузеров, которые не поддерживают RGBA */
    background: rgb(0, 0, 0);
    /* RGBa с непрозрачностью 0,5 */
    background: rgba(0, 0, 0, 0.5);
}

Internet Explorer 8 и более ранние версии не поддерживают цвета RGBA. Они используют gradient filter для достижения эффекта RGBA, использование которого не рекомендуется.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.