Эта статья познакомит вас с концепцией, которая поможет вам понять непрозрачность в и расскажем, как управлять этим параметром. Следующие указатели будут рассмотрены в этой статье,
- Непрозрачность в CSS
- Непрозрачность, унаследованная от каскадных элементов
- Настройка атрибута RGBA для каскадных элементов
- Изменения непрозрачности при наведении курсора
Прозрачность фона элемента - полезная настройка функции в дизайне HTML. Установив уровень непрозрачности (обратный прозрачности), дизайнер может управлять видимостью элемента с помощью свойства прозрачности CSS. Обычно это используется в качестве фоновой настройки при каскадном расположении элементов друг над другом.
Наиболее распространенный сценарий, в котором используется эта функция:
- Частично прозрачное фоновое изображение помещается за текстовым элементом.
- Фоновое изображение плохо видно, поэтому оно не доминирует над текстом впереди.
- Изображение может быть полностью сфокусировано, когда пользователь явно хочет его увидеть.
Возможно, вы захотите прочитать прежде чем приступить к изучению прозрачности CSS.
как использовать параметры в таблице
Подробное руководство по CSS можно найти на сайте Edureka CSS Учебник для начинающих . Вы получите отличную информацию о том, как использовать CSS для улучшения веб-дизайна HTML.
Продолжаем читать статью о непрозрачности в CSS
Непрозрачность в CSS
В CSS непрозрачность задается как числовое значение в диапазоне от 0,0 до 1,0. Значения, близкие к нулю, представляют большую прозрачность, изображение будет очень светлым для видимости. Начнем с примера изображения, которое отображается с 50% прозрачностью. См. Пример 1 ниже.
Пример 1: фоновое изображение установлено на полу- прозрачность
img {opacity: 0.5 filter: alpha (opacity = 50) / * Для IE8 и более ранних версий * /} 
Пример 1: Вывод
Исходное изображение (100% непрозрачность)
Изображение с настройкой непрозрачности 50%
В приведенном выше примере был только один элемент - изображение. Другие элементы также могут быть установлены с помощью параметра непрозрачности, например, текст, элементы div и так далее.
Продолжаем читать статью о непрозрачности в CSS
таблица смешивания данных левое соединение
Непрозрачность, унаследованная от каскадных элементов
Когда элементы накладываются друг на друга, если фоновый элемент имеет настройку непрозрачности, то он наследуется всеми дочерними элементами. Это настройки по умолчанию . Это означает, что если над изображением помещено текстовое поле и для изображения установлено значение непрозрачности 0,5, то и изображение, и текстовый элемент будут видны только частично.
Давайте возьмем экземпляр дочернего текстового элемента, помещенного поверх изображения TOM & JERRY в нашем следующем примере. Мы можем увидеть эффект непрозрачности по умолчанию в Примере 2.
.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } ТОМ И ДЖЕРРИПример 2: текст наследует непрозрачность от родительского изображения
Продолжаем читать статью о непрозрачности в CSS
Настройка атрибута RGBA для каскадных элементов
Есть еще один способ управления непрозрачностью с помощью каскадных элементов. Если вы хотите, чтобы на дочерний элемент не влияла непрозрачность его фонового элемента, вы можете использовать Настройка атрибута RGBA .
Пример 3: Использование настройки RGBA
background: rgba (76, 175, 80, 1.0) / * Изображение не имеет настройки непрозрачности * / / * Зеленый фон для текста со 100% непрозрачностью * / / * Текст синего цвета имеет 100% непрозрачность * /
background: rgba (76, 175, 80, 0.4) / * Изображение не имеет настройки непрозрачности * / / * Зеленый фон для текста с непрозрачностью 40% * / / * Синий текст по-прежнему отображается со 100% непрозрачностью * /
пример переменной экземпляра в java
После цветового кода RGB атрибут «a» означает альфа . В альфа Параметр - это число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).
Продолжаем читать статью о непрозрачности в CSS
Изменения непрозрачности при наведении курсора
В некоторых сценариях веб-дизайнеры хотят, чтобы непрозрачность варьировалась в зависимости от того, сосредоточен ли пользователь на элементе или нет. Например, допустим, для изображения по умолчанию установлено значение непрозрачности 50%. Однако, когда пользователь наводит указатель мыши на изображение, мы хотим, чтобы изображение полностью фокусировалось со 100% непрозрачностью.
Пример 4 показывает, как это делается.
Общие моменты, на которые следует обратить внимание:
- Параметр «Непрозрачность» является альтернативой использованию атрибута «видимость» в CSS. Однако использование параметра непрозрачности позволяет легко установить различные степени прозрачности, от нуля до полной.
- Уровень непрозрачности устанавливается после тщательного тестирования в различных браузерах. Если для непрозрачности установлено низкое значение, иногда текст или изображение могут стать полностью невидимыми или нечитаемыми.
- Идея использования непрозрачности заключается в том, чтобы сосредоточить внимание на некоторых элементах, в то время как другие элементы фона не отвлекают внимание пользователя. Таким образом, такие элементы фона устанавливаются с меньшей непрозрачностью.
- В Internet Explorer для IE8 и более ранних версий свойство непрозрачности представляет собой настройку «фильтра» в диапазоне от 1 до 100. Во всех других браузерах оно изменяется от 0 до 1.
На этом мы подошли к концу статьи о непрозрачности в CSS.
Если вы хотите узнать больше о веб-разработке, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам узнать, как создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Если вам все еще интересно. Если у вас есть какие-либо вопросы, вы можете опубликовать их в разделе комментариев этого блога «Непрозрачность в CSS», и мы свяжемся с вами как можно скорее.