CSS Opacity / Transparency
Свойство opacity определяет непрозрачность / прозрачность элемента.
Прозрачное изображение
Свойство opacity может принимать значение от 0,0 до 1,0. Чем ниже значение, тем прозрачнее:
opacity 1
(по умолчанию)
Примечание: IE8 и более ранние версии используют filter:alpha(opacity=x) . Значение x может принимать значение от 0 до 100. Более низкое значение делает элемент более прозрачным.
Пример
Эффект прозрачности при наведении курсора
Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении курсора:
Пример
img <
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 и ранее */
>
img:hover <
opacity: 1.0;
filter: alpha(opacity=100); /* Для IE8 и ранее */
>
Объяснение примера
Первый блок CSS похож на код в Примере 1. Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение НЕ было прозрачным, когда пользователь наводит на него курсор. Значение в CSS для этого opacity:1; .
Когда указатель мыши отходит от изображения, изображение снова становится прозрачным.
Пример обратного эффекта при наведении курсора:
Пример
Прозрачный блок
При использовании свойства opacity для добавления прозрачности на фон элемента все его дочерние элементы наследуют одинаковую прозрачность. Это может затруднить чтение текста внутри полностью прозрачного элемента:
Пример
Прозрачность с использованием RGBA
Если вы не хотите применять непрозрачность к дочерним элементам, как в нашем примере выше, используйте цветовые значения RGBA. В следующем примере задается прозрачность цвета фона, а не текста:
Из главы Цвета CSS вы узнали, что в качестве значения цвета можно использовать RGB. В дополнение к RGB можно использовать значение цвета RGB с альфа-каналом (RGBA), которое определяет непрозрачность для цвета.
Значение цвета RGBA указывается с помощью: rgba (красный, зеленый, синий, альфа). Параметр alpha — это число от 0,0 (полностью прозрачное) до 1,0 (полностью непрозрачное).
Совет. Подробнее о цветах RGBA вы узнаете в разделе CSS Цвета на нашем сайте W3Schools на русском.
Пример
Текст в прозрачном поле
Это некоторый текст, который помещается в прозрачный блок.
Пример
<html>
<head>
<style>
div.background <
background: url(klematis.jpg) repeat;
border: 2px solid black;
>
div.transbox <
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* Для IE8 и ранее */
>
<div > <div > <p>Это некоторый текст, который помещается в прозрачный блок.</p>
</div>
</div>
Сначала мы создаем элемент <div> (class="background") с фоновым изображением и границей. Затем мы создаем еще один <div> (class="transbox") внутри первого <div> . <div имеют цвет фона и границу — div прозрачен. Внутри прозрачного <div> мы добавляем текст внутри элемента <p> .
Проверьте себя с помощью упражнений!
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Изменение прозрачности фонового изображения CSS
С CSS и CSS3 можно сделать много интересных вещей, но установка непрозрачного фона CSS не входит в их число. Однако существует очень много творческих подходов, которые могут помочь добиться эффекта изменения прозрачности фонового изображения CSS. Оба приведенных ниже метода имеют отличную поддержку браузеров вплоть до Internet Explorer 8.
Метод 1. Использование абсолютного позиционирования и изображения
Название этого метода описывает его содержание. Вы просто используете абсолютное позиционирование для нормального тега img и делаете его таким, как если бы вы использовали свойство CSS background-image . Для этого достаточно поместить изображение в контейнер position: relative; . Вот так обычно выглядит разметка HTML:
Вот так выглядит код CSS:
Здесь важно обеспечить абсолютное позиционирование изображения и растянуть его так, чтобы оно заполнило весь родительский контейнер. При этом важно относительное позиционирование всех элементов, чтобы вы могли установить индекс z-index , поднимающий их над изображением.
Ниже приведена демонстрация:
Hello World!
Метод 2. Использование псевдоэлементов CSS
Этот метод с первого взгляда выглядит простым, и я его определенно предпочитаю. Используя псевдоэлементы CSS :before или :after , вы устанавливаете div с фоновым изображением и задаете для него прозрачность. При этом разметка HTML будет выглядеть примерно так:
Вот так выглядит код CSS:
Здесь нам снова нужно переместить z-index содержимого (в данном случае <h1> ) над псевдоэлементом background, и мы должны явно определить position: absolute; и z-index: 1 на псевдоэлементе :before .
Остальные атрибуты псевдоэлемента располагают его так, чтобы он на 100% перекрывал родительский элемент, а также используют новое полезное свойство CSS: background-size: cover , которое определяет размер фона для покрытия элемента без изменения пропорций. Ниже приведена прекрасная демонстрация этого метода:
Hello World!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Transparent PNG Image in HTML
I would like to have this picture’s background transparent to the webpage I am creating. I am using Paint Shop Pro 9 and am having trouble making the background transparent. I tried the PNG optimizer but still shows a white background.
1 Answer 1
It shows up correctly (with transparency) in my browser. If you’re having problems with IE6, try this:
-
The Overflow Blog
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.5.24.43458
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Прозрачность фонового изображения в CSS
opacity – это свойство CSS, которое позволяет настраивать прозрачность элемента. По умолчанию для всех элементов оно имеет значение 1. Приближая это значение к 0, вы можете сделать элемент более прозрачным.
Обычный вариант применения свойства opacity – использование изображения как части фона. Регулировка прозрачности может улучшить читаемость текста или поможет добиться желаемого визуального эффекта. Однако имейте в виду: невозможно менять opacity элемента background-image, не затрагивая при этом его дочерние элементы.
В этом руководстве мы предлагаем два метода обхода этого ограничения для фоновых изображений.
Требования
Чтобы следовать этой статье, вам понадобятся навыки работы с такими вещами:
Метод 1: Изображения и абсолютное позиционирование
Первый подход будет основан на двух элементах (как можно понять из названия). Один из них – «обертка», которая обеспечивает точку отсчета с помощью position: relative. Второй – это элемент img, который появляется за контентом с помощью position: absolute и контекста наложения.
Разметка, написанная с применением этого подхода, может выглядеть так:
Соответствующие CSS-стили будут выглядеть так:
В итоге текст «Hello World!» будет наложен поверх изображения.
Родительский demo-wrap <div> устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg <img> установлено значение position: absolute и присвоено свойство opacity . Для demo-content <div> установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.
У этого подхода есть некоторые ограничения. Во-первых, он предполагает, что ваше изображение достаточно велико, чтобы вместить любой элемент. Возможно, вам потребуется установить ограничения по размеру, чтобы изображение не выглядело обрезанным или не занимало всю высоту элемента. Во-вторых, вам потребуются дополнительные настройки, если вы хотите контролировать положение фона.
Метод 2: Псевдоэлементы CSS
Второй подход основан на псевдоэлементах. Псевдоэлементы :before и :after можно использовать для большинства CSS элементов. Как правило, вы предоставляете значение content и используете его для добавления дополнительного текста в начале или в конце. Однако так вы также можете добавить пустую строку, а затем использовать псевдоэлементы для дизайна.
Вот пример разметки для этого подхода:
А вот – ее сопутствующие стили:
Эта разметка и стили выведут фразу «Hello World!» поверх изображения.
Родительский demo-wrap <div> устанавливает блок, содержащий абсолютное позиционирование. Псевдоэлементу :before присвоено position: absolute с небольшой прозрачностью. Он использует background-size: cover, чтобы занять все доступное пространство.
Преимущество этого подхода заключается в поддержке других свойств фона, таких как background-position, background-repeat и background-size. Его недостатком является использование одного из псевдоэлементов, который может конфликтовать с другими эффектами дизайна – например, с clearfix.
Заключение
В этой статье мы рассмотрели два метода обхода ограничения для непрозрачных фоновых изображений.