opacity в CSS


Содержание

Opacity в 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 vs RGBA)

На этом уроке мы с вами разберем такие 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 и не забудьте закомментировать, чтобы не пострадала валидность кода.

Вывод

Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer. Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS.

Илон Маск рекомендует:  Свойства текста

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    спасибо за полезную статью.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    CSS opacity Свойство

    Пример

    Задайте уровень непрозрачности для элемента

    Подробнее примеры ниже.

    Определение и использование

    Свойство opacity задает уровень непрозрачности для элемента.

    Уровень прозрачности описывает уровень прозрачности, где 1 не является прозрачным, 0,5 составляет 50%, а 0 полностью прозрачен.

    Примечание: При использовании свойства opacity для добавления прозрачности к фону элемента все его дочерние элементы также становятся прозрачными. Это может сделать текст внутри полностью прозрачный элемент трудно читать. Если вы не хотите применять непрозрачность к дочерним элементам, используйте вместо этого значения цвета RGBA (см. ниже «Дополнительные примеры»).

    Значение по умолчанию: 1
    Inherited: no
    Animatable: yes, see individual properties. Читайте о animatable
    Version: CSS3
    Синтаксис JavaScript: object.style.opacity=»0.5″

    Поддержка браузера

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

    Свойство
    opacity 4.0 9.0 2.0 3.1 9.0

    Примечание: IE8 и более ранние версии поддерживают альтернативу, свойство Filter. Как: фильтр: альфа (непрозрачность = 50).

    Синтаксис CSS

    Значения свойств

    Значение Описание
    number Задает непрозрачность. От 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный)
    initial Присваивает этому свойству значение по умолчанию. Читайте о initial
    inherit Наследует это свойство из родительского элемента. Читайте о inherit


    Другие примеры

    Пример

    Свойство Opacity добавляет прозрачность к фону элемента, а также ко всем его дочерним элементам. Это делает текст внутри прозрачного элемента трудно читать:

    Пример

    Чтобы не применять непрозрачность к дочерним элементам (как в примере выше), используйте вместо этого значения цвета RGBA . В следующем примере устанавливается непрозрачность для цвета фона, но не для текста:

    div.first <
    background: rgba(76, 175, 80, 0.1);
    >

    div.second <
    background: rgba(76, 175, 80, 0.3);
    >

    div.third <
    background: rgba(76, 175, 80, 0.6);
    >

    Совет: Узнайте больше о RGBA цветах в CSS RGBA Colors.

    Пример

    Как использовать JavaScript для изменения непрозрачности для элемента:

    Свойство CSS opacity: управление прозрачностью

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

    Возможные значения

    Синтаксис свойства opacity в css выглядит так:

    На вход принимаются числовые значения в диапазоне от 0 до 1. Параметр может представлять собой доли единицы, при этом в качестве разделителя целой и дробной части в CSS используется точка.

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

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

    Прозрачность дочерних узлов

    Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть «менее прозрачным», чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.

    В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.

    Примеры использования

    Пример 1. Полупрозрачность. Необходимо, чтобы под элементом target был виден основной фон блока.

    Полупрозрачным становится не только фон блока target, но и текст.

    Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.

    Динамическая прозрачность

    Последний пример демонстрирует, что прозрачные элементы продолжают реагировать на события страницы, такие как наведение курсора. Это позволяет использовать javascript для управления свойством CSS opacity, а также применять механизмы transition и animation для плавного изменения режима отображения.

    Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.

    Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:

    Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора — тускнеть до исходного значения в течение двух секунд.

    Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.

    Альфа-канал вместо opacity

    Главные тонкости механизма opacity в CSS:

    • его действие распространяется не только на фон блока, но и на его текстовый контент, который предпочтительнее оставлять четким;
    • дочерние элементы не могут быть менее прозрачными, чем родительские.

    Если эти эффекты осложняют жизнь верстальщика, вместо opacity следует использовать просто прозрачный фон, определив его значение в формате RGBA или HSLA.

    Блог Vaden Pro

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

    В настоящее время все чаще на сайтах можно встретить применение эффекта полупрозрачности элементов. Позволяет просвечивать один элемент так, чтобы можно было увидеть задний фон. В умелых руках дизайнера это становится эффектным приемом. Ниже представлен пример такого решения, когда цветной фон наложен на картинку:


    Теория и практика

    Реализуется данный подход с помощью свойства opacity. Предлагаю рассмотреть реальный практический пример и, отталкиваясь от него, будем изучать работу данного свойства.

    В браузере будет примерно такая картинка:

    Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.

    Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов.

    Илон Маск рекомендует:  Создание консольных приложений в c builder 6

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

      filter:prog >К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

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

    Это свойство должно относиться к стилю просвечиваемого блока.

    На заметку

    При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный – для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.

    Вот так будет выглядеть наше решение в браузере

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

    Затемнение фона

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

    Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

    Наш предыдущий код принимает вид (HTML оставляем без изменений):

    opacity

    The opacity property is used to control the level of transparency of an element. Using this property, you can set an element to be fully transparent, fully opaque (default), or translucent.

    It takes a value that specifies the degree of transparency of the element. The number ranges anywhere between 0 and 1. A value of 1 is the default value, and makes the element fully opaque. A value of 0 makes the element fully transparent so you can’t see it anymore. A value between 0 and 1 makes it translucent (or semi-transparent).

    The lower the value goes from 1 to 0 the more transparent the element becomes, and the more you can see any backgrounds or elements that are behind/below it.

    The opacity property applies the specified opacity to the element as a whole, including its contents, rather than applying it to each descendant individually. This means that, even if the opacity property does not cascade (is not inherited by default), the descendants of an element will get the same opacity as their parent element anyway. There is no way to force a descendant of the element to becomes less transparent than its parent.

    Trivia & Notes

    The opacity property has the same effect as the visibility property in that it can make the element fully transparent (invisible) without affecting layout—the transparent element still takes up a space on the layout as if it were visible.

    If opacity has a value less than 1, the element forms a stacking context for its children. This means that any content outside of it cannot be layered in z-order between pieces of content inside of it, and vice versa. See the z-index property entry for details and an explanation.

    The opacity property can be used to create fade-in/fade-out effects with CSS. See the demo section below for a live example.

    The Performance Of opacity

    Paul Irish and Addy Osmani discussed the performance of the opacity property and shared the following results:

    Opacity is one of the few CSS properties that can be properly accelerated because the GPU can manipulate it easily.

    Basically, any layer where you want to fade the opacity over a CSS transition or animation, the browser is actually smart enough to throw it onto the GPU and do the manipulation over there and it’s going to be very fast.

    Of all CSS things, opacity is one of the most performant and you’re not going to have problems using it.

    Official Syntax

    • Syntax:
  • Initial: 1
  • Applies To: all elements
  • Animatable: yes, as a number

  • Values

    A value of 0 will render the element fully transparent (invisible). A value of 1 will render the element fully opaque (default value). Any number between 0 and 1 will make the element translucent (semi-transparent), and any backgrounds and elements behind it / under it will show through.

    Examples

    The following makes an image translucent, and then animates it into fully opaque on hover, using a CSS Transition, creating a subtle fade-in effect.

    The following example is compatible with versions of Internet Explorer that don’t support the opacity property. See the Browser Support section below for details.

    Live Demo

    Browser Support

    CSS3 Opacity

    Method of setting the transparency level of an element

    Свойство opacity

    Свойство opacity задает степень непрозрачности объекта. Степень непрозрачности задается вещественным числом в диапазоне от 0 (полностью прозрачно) до 1 (полностью непрозрачно), любое значение вне данного диапазона урезается до 0 или 1. Параметр непрозрачности равномерно применяется ко всему элементу. Свойство opacity не наследуется, и, по умолчанию, равняется 1. Непрозрачность была введена в модуле CSS3 Цвет.

    Примеры использования

    Значение Результат
    • прозрачный блок
      (opacity = 0)
    • полу-прозрачный блок
      (opacity = 0.25)
    • полу-прозрачный блок
      (opacity = 0.5)
    • полу-прозрачный блок
      (opacity = 0.75)
    • непрозрачный блок
      (opacity = 1)

    Свойство opacity определено в спецификации CSS 3 модуль Color Level 3 (цвет, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение 1. На данный момент свойство поддерживается во всех основных браузерах.

    CSS прозрачность

    Задача

    Сделать элемент HTML (например выпадающее меню) полупрозрачным.

    Выпадающее меню с полупрозрачностью
    (opacity=0.5) Выпадающее меню без прозрачности

    Решение

    В стилях для нужного элемента задаем:

    Теория

    W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

    К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

      filter:prog >filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.

    Возможные проблемы

    Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1

    Делаем полупрозрачный фон

    При добавлении эффекта прозрачности элементу, все вложенные элементы тоже становятся прозрачными. Из-за этого могут возникнуть некоторые трудности, например, текст становится трудночитаемым. Для решения этой проблемы применяется метод с использование прозрачного фона. В качестве примера будем использовать выпадающее меню. HTML код:

    CSS3 transition прозрачности и видимость блока :: Хранитель заметок

    CSS3 transition прозрачности и видимость блока

    Плавное появление элементов интерфейса с помощью CSS-анимации прозрачности уже стало обычной практикой. Но такой блок даже с полной прозрачностью перекрывает всё, что окажется под ним.

    Устанавливать свойство display: none нельзя потому, что тогда перестанет работать анимация. В этом случае поможет смена значения у свойства visibility . Его, на ряду с другими свойствами, указываем в transition.

    При «затухании» блока значение visibility: hidden применится с задержкой равной длительности анимации прозрачности. Без задержки блок будет скрыт мгновенно. Для фазы «появления» блока такой задержки наоборот не нужно. Блок должен получить видимость сразу и только после этого у него будет меняться прозрачность.

    Обновление: В примере исправил «дрожание» блока, когда указатель движется около его нижней границы. Это приводило к тому, что указатель то уходил с блока, то вновь оказывался поверх него.

    PS: Разумеется, названия CSS3 свойств transition и transition-delay нужно указывать с браузерными префиксами.

    Ещё заметки со схожей тематикой

    Категории


    Коментарии к заметке

    @mista_k если я правильно понял задачу то тут поможет так же pointer-events: none; но кроссбраузерности будет конечно меньше.

    Можно (с известными ограничениями http://caniuse.com/#search=pointer-events). Для pointer-events больше годятся задачи типа «белого градиента, накрывающего текст».

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

    Это легко исправляется как раз выше названным свойством pointer-events. Вот ещё один пример с новой улучшенной кнопкой, тултип которой не страдает от «дрожания» указателя рядом с его нижним краем:

    В стили добавил два правила:

    Если использовать pointer-events , то не получится перейти курсором в этот tooltip (чтобы выделить текст или перейти по ссылке в самом тултипе, например), но если этого и не требуется, то такого же эффекта со значительно большей поддержкой можно достичь, используя другую разметку и селектор + (http://caniuse.com/#feat=css-sel2) http://jsfiddle.net/65xm7/1/

    Так pointer-events: none назначается только в фазе «затухания». Предполагается, что с блоком в этот момент уже нельзя никак взаимодействовать, что выглядит вполне логично.

    Спасибо за пример. Он, разумеется, проще и надёжнее, но имеет совсем другое поведение.

    Мерцание можно убрать с css -webkit-backface-visibility: hidden;

    Вот еще пример с анимацией стрелки тултипа http://jsfiddle.net/iurevych/5bnA9

    Данный пример использовал для открытия подпунктов меню. Нормально работает

    opacity

    Easily manage projects with monday.com

    Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the «alpha» channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).

    IE Compatibility

    If you want opacity to work in all versions of IE, the order should be as follows:

    If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

    Note on Stacking Contexts

    If an element with opacity and a value less than 1 is positioned, the z-index property applies as described in CSS2.1, except that the auto value is treated as 0 since a new stacking context is always created.

    Opacity can be used as an alternative to the visibility property: visibility: hidden; is just like opacity: 0; .

    Other Resources

    Comments

    how can u make boxes with transparent border of 10px.
    can u please help me out..
    i am searching for the solution..

    if possible please send me a demo code..or complete example..

    Thank you in advance

    You could use rgba() as color of border:

    border: 10px solid rgba(255, 0, 0, 0.4);

    You can use padding

    Has anyone noticed this new thing where if you define a background color like this; background-color: #000000b3; it adds opacity to it. This seems fairly new to me been trying to find documentation on it all morning. If anyone has more info, let me know (Only tried it in Firefox, no idea if it works in other browsers)

    Hi Chris, you’re mixing CSS and JS style comments in the first code block on this page. // foo vs /* foo */ – this might be an issue for anyone copying and pasting your example directly into their work.

    Just now realised you might have been using Sass for the inline // foo comments. Even so, it would be good to clarify to avoid people who aren’t using a pre-processor from using non-valid comments in vanilla CSS.

    I want only to reduce the box background opacity and opacity of text in box Does not change! please help me…
    sorry if i have misspelled , i cant speak english very well! :(

    use RGB instead of HEX. A white background with 50% opacity is:
    background: rgba(255, 255, 255, 0.5);

    Hassan, it sounds like you’re asking how to have opacity on a box while having text show inside the box that does not have opacity on it.

    The opacity property will affect anything inside of it. So the technique I prefer is to:
    1) wrap the box (that needs opacity) within a container and give it position:relative
    2) give the box its opacity property (obviously)
    3) put the text in its own container as an adjacent sibling to the opaque box, give it position:absolute, set the top & left properties however you want to set its placement

    Gilbrizzle’s info is good as it relates to the topic of this article, which is the “opacity” attribute, but what Hassan is asking requires a simpler solution: don’t use “opacity”, but rather use RGB + “alpha” instead.

    “opacity” attribute will apply to all of the attributes of the selector where it’s defined.

    RGBA, however, only applies to the specific attribute it’s applied to and leaves the other attributes of the selector alone.

    Doing this gives a 40% level of transparency to the grey background, but the text in front of it remains black.

    There are reasons to use either solution, so it’s a matter of which is best for what you’re trying to do. I think this simpler one may be you were looking for though.

    Илон Маск рекомендует:  Asp компонент content linking
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL