Как сделать прозрачный цвет в css

CSS: Прозрачность

Для создания эффекта прозрачности в CSS используется свойство opacity.

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:

Прозрачность при наведении

Псевдо-класс :hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:

Прозрачность фона

Есть два возможных способа сделать элемент прозрачным: свойство opacity , описанное выше, и указание цвета фона в RGBA формате.

Возможно вы уже знакомы с моделью представления цвета в формате RGB . RGB (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

Цвета, заданные с помощью RGB , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.

Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB . Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

CSS3 — прозрачность, тени и градиенты

Возможность делать изображения и цвета прозрачными является одним из самых фундаментальных строительных блоков в CSS3. Существуют два способа установки прозрачности. Первый заключается в использовании функции rgba(), которая принимает четыре параметра. Первые три параметра задают значения (от 0 до 255) красной, зеленой и синей составляющей цвета. Последний параметр задает значение прозрачности, или альфа, которое может быть в диапазоне от 0 (полная прозрачность) до 1 (полная непрозрачность).

Следующее правило задает фон ярко-зеленого цвета 50-процентной прозрачности:

Браузеры, которые не поддерживают функцию rgba(), будут просто игнорировать это правило, и фон сохранит прозрачность по умолчанию — полная прозрачность.

Поэтому второй подход лучше. Здесь мы сначала устанавливаем сплошной резервный цвет, а потом заменяем его полупрозрачным цветом:

Таким образом, браузеры, которые не поддерживают функцию rgba(), все равно окрасят фон элемента, но только полностью непрозрачным цветом.

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

Спецификация CSS3 также определяет свойство стиля opacity (непрозрачность), которое работает точно так же, как и значение альфа. Значение opacity тоже устанавливается в диапазоне от 0 до 1, позволяя сделать любой элемент полупрозрачным:

На рисунке ниже показаны два примера полупрозрачности, один из которых реализован с помощью функции rgba(), а другой — с помощью свойства opacity:

Прозрачность CSS3

Свойство opacity предпочтительнее использовать вместо функции rgba() в следующих случаях:

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

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

когда нужно сделать полупрозрачным изображение;

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

Спецификация CSS3 определяет два новых типа теней: блочные тени (box shadows) и текстовые тени (text shadows). Блочные тени обычно более полезны и имеют более высокий уровень поддержки, в то время как текстовые тени не работают ни в одной из версий Internet Explorer. Блочную тень можно использовать для создания прямоугольной тени позади любого блока элемента <div> (но не забудьте при этом о рамке, чтобы он продолжал выглядеть как блок). Тени могут даже следовать контурам блоков со скругленными углами:

CSS3-тени

Рассматриваемые тени создаются посредством свойств box-shadow и text-shadow. Далее приведен пример создания базовой блочной тени:

Первые два значения свойства box-shadow устанавливают горизонтальное и вертикальное смещения тени от исходного объекта. Положительные значения смещают тень вниз и вправо, отрицательные — вверх и влево. Следующее значение определяет размер размытия (blur, в данном примере 10 пикселов), которое увеличивает расплывчатость тени. Последнее значение определяет цвет тени. Если под блоком находится какое-либо содержимое, подумайте об использовании функции rgba(), чтобы сделать тень полупрозрачной.

Для более тонкой настройки тени в свойство box-shadow можно добавить два значения. Чтобы установить ширину (spread) тени — подсвойство, которое расширяет тень, утолщая ее сплошную часть между размытыми краями, добавляется значение между значениями размытия и цвета:

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

Свойство text-shadow требует подобного набора значений, но в другом порядке. Сначала указывается цвет, за ним следует горизонтальное и вертикальное смещения, а потом размытие:

Градиенты

Градиенты — это переходы цветов, которые могут создавать широкий диапазон эффектов, от едва различимой тени под панелью меню до психоделически раскрашенных кнопок.

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

В CSS нет никаких специальных свойств для создания градиентов. Вместо них используется функция градиента для установки свойства background. Но не забудьте сначала назначить этому свойству сплошной цвет, чтобы создать резервную заливку для браузеров, которые не поддерживают градиенты (включая Internet Explorer, который поддерживает градиенты, только начиная с версии IE 10).

Существуют четыре функции градиентов, и для всех них требуется применять префиксы разработчиков браузеров. В этом разделе мы рассмотрим примеры градиентов для браузера Chrome (для которого применяется префикс -webkit-). Для поддержки браузеров Firefox и Opera нужно добавить точно такие же значения градиентов, но с префиксами -moz- и -o-.

Первой рассмотрим функцию linear-gradient(). Далее приводится одна из ее простейших форм, окрашивающая блок белым цветом вверху, который переходит в синий внизу:

Заменив значение top на left, получим линейный горизонтальный градиент. А указав для начала градиента угол блока, получим диагональный переход:

Можно создать многоцветный градиент, предоставив список цветов. Например, следующее правило создает трехцветный горизонтальный градиент:

Линейный градиент CSS3

Наконец, вместо равномерного распределения цветов градиента можно указать позицию начала каждого цвета посредством точек остановки градиента (gradient stops), растягивая или сжимая полосы или смещая их в ту или другую сторону.

Точки остановки градиентов указываются в процентах, где 0% означает начало градиента, а 100% — окончание. Следующий пример градиента растягивает оранжево-желтую среднюю часть:

Радиальный градиент создается с помощью функции radial-gradient(). Для нее нужно предоставить центр круга и цвет для внешнего края круга, где он совпадает с рамкой элемента. Следующее правило определяет радиальный градиент, начинающийся с белой точки в центре и переходящий к синему цвету на окружности:

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

С другими примерами градиентов и двумя другими функциями для создания градиентов, не рассмотренными здесь (repeating-linear-gradient() и repeating-radial-gradient()), можно ознакомиться в блоге, посвященном браузеру Safari.

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

Руководство по свойству opacity в CSS

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

Opacity в Firefox, Safari, Chrome, Opera и IE9

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

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

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

Opacity в Internet Explorer 8 и ниже

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

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

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

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

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

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

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

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

opacity:1 opacity:0.5 opacity:0.25

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

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

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

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

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

OPACITY OPACITY OPACITY OPACITY

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

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

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

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

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

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

RGBA RGBA RGBA RGBA

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

RGBA RGBA RGBA RGBA

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

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

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

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

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

Похожие посты

  • 16 декабря, 2019
  • 7-8 мин.
  • 67

Руководство по таблицам в CSS

  • 14 декабря, 2019
  • 2-3 мин.
  • 49

Руководство по свойству margin в CSS

  • 14 ноября, 2019
  • 3-4 мин.
  • 31

Руководство по выравниванию элементов в CSS

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

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

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

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

Разработка сайтов для бизнеса

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *