Меню

Что такое прозрачность цвета



Прозрачные изображения и прозрачный текст, альфа канал и свойство css opacity:

Здравствуйте уважаемые начинающие веб-мастера

Мы уже научились создавать фоновые изображения.

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

Для создания эффекта прозрачности в CSS применяются:

1. Формат RGBA — создаёт прозрачный цвет.

Аббревиатура RGBA включает в себя три цвета

а. R — red (красный);

б. G — green (зелёный);

в. B — blue (синий);

г. А — Alfa величина прозрачности цвета определяющаяся числом от 0 до 1, где 0 — это полная прозрачность.

Записывается следующим образом:

color : rgba(120 40 200 0,4); .

2. Свойство CSS opacity — делает прозрачным любой элемент контента.

Прозрачность задаётся числом от 0 до 1, где 0 — полная прозрачность, 1 — полная не прозрачность.

Цвет подбирается при помощи инструментов подбора цвета, которых в интернете предостаточно, а самый ближайший, думаю, находится в Painte, и для его вызова достаточно щёлкнуть по иконке «Подбор цветов», в панели инструментов редактора.

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

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

Рассмотрим как это работает на примерах. Возьмём фоновое изображение вьюги.

И добавим в эту вьюгу, прекрасную представительницу холодного царства.

Как видно из результата, получилась какая то аппликация, а не картина.

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

Прозрачность для изображений создаётся свойством css opacity , и значения его принимаются от 0 до 1.

Причём 0 — это абсолютная прозрачность, то есть картинка вообще визуально не видна, а 1 — это отсутствие всякой прозрачности.

Давайте зададим картинке прозрачность равную 0.1

Результат:

Как видите, у вьюги проявилось лицо.

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

Для этого в html части кода, разместим тег p с текстом, а в таблице стилей, создадим селектор p , и зададим ему необходимые свойства.

Вот так можно создавать изображения и снабжать их надписями. Принцип думаю понятен, остальное будет зависеть от Вашего творческого воображения и полёта фантазии.

Давайте создадим блок с фоном, и напишем в нём прозрачный текст.

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

Желаю творческих успехов.


Перемена

— Мама, мама! Вовка меня всю обрызгал!
— А ты его тоже обрызгай.
— Но, мама, как? Я же девочка!

— Официант! Почему в моей котлете волосы?
— Понимаете, у нас повар однорукий, он котлеты
на груди лепит, вот и налипли.
— Представляю, чем он у вас перец
фарширует!

Источник

Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.

HSL(A) — цветовая палитра и прозрачность цвета в CSS

HSL (от англ. Hue, Saturation, Lightness). — это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой.
Давайте рассмотрим каждый параметр отдельно: hsl (120,100%,50%)

(Hue) ЦВЕТ

Для того чтобы определить тон нужно указать градус поворота (от 0° до 360°) цветового круга. Имеется радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (360°)

Между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.

(Saturation) НАСЫЩЕННОСТЬ

Второе значение цветовой модели HSL определяет насыщенность выбранного оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и «сочно» и наоборот если насыщенность стремится к 0% то цвет «линяет» и становится серым.

(Lightness) ОСВЕЩЕНИЕ

Светлота или яркость это третий параметр HSL. Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета. Оптимальное значение яркости цвета равняется 50%.

Читайте также:  Лютики с желтыми цветами

Цвета HSLA. Альфа-ПРОЗРАЧНОСТЬ

Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета. Значение цвета HSLA задается с помощью: hsla (hue, saturation, lightness, alpha), где параметр alpha определяет непрозрачность.

Для приобретения прозрачности нужно к коду дописать альфа канал:

Пример вставки цвета HSLA в CSS файл:

hsl a (120,100%,50%, 0.5 )
В данном примере канал прозрачности 0.5, цвет будет показан ровно на половину.

Источник

Прозрачность (графика) — Transparency (graphic)

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

Кроме того, прозрачность часто является «лишней» для графического формата, и некоторые графические программы игнорируют прозрачность.

Форматы растровых файлов, поддерживающие прозрачность, включают GIF , PNG , BMP , TIFF , TGA и JPEG 2000 с использованием прозрачного цвета или альфа-канала .

Большинство векторных форматов неявно поддерживают прозрачность, потому что они просто не помещают какие-либо объекты в заданную точку. Сюда входят EPS и WMF . Для векторной графики это не может строго рассматриваться как прозрачность, но это требует того же тщательного программирования, что и прозрачность в растровых форматах.

Более сложные векторные форматы могут допускать комбинации прозрачности между элементами внутри изображения, а также указанное выше. Сюда входят SVG и PDF .

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

Содержание

Прозрачные пиксели

Один элемент цвета в палитре одного изображения GIF или PNG может быть определен как «прозрачный», а не как реальный цвет. Это означает, что когда декодер встречает пиксель с этим значением, он отображается в цвете фона той части экрана, на которой размещено изображение, также если это изменяется пиксель за пикселем, как в случае фонового изображения .

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

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

Даже эта ограниченная форма прозрачности имеет неоднородную реализацию, хотя большинство популярных веб-браузеров могут отображать прозрачные изображения в формате GIF. Эта поддержка часто не распространяется на печать, особенно на устройства печати (например, PostScript ), которые не включают поддержку прозрачности в устройстве или драйвере. За пределами мира веб-браузеров прозрачные файлы GIF практически не поддерживаются.

Граничные ограничения прозрачных пикселей

Края символов и других изображений с прозрачным фоном не должны иметь оттенков серого : они обычно используются для промежуточных цветов между цветом буквы / изображения и цветом фона, обычно оттенки серого являются промежуточными между черной буквой и белый фон. Однако, например, с красным фоном промежуточные цвета будут темно-красными. Пиксели с серыми краями дадут уродливый и нечеткий результат. Для переменного цвета фона нет подходящих фиксированных промежуточных цветов.

Частичная прозрачность по альфа-каналам

Некоторые форматы изображений, такие как PNG и TIFF, также допускают частичную прозрачность через альфа-канал, что решает проблему ограничения границ. Вместо того, чтобы каждый пиксель был прозрачным или непрозрачным, для него можно установить 254 уровня частичной прозрачности, что позволяет некоторой части фонового изображения отображаться через изображение переднего плана.

В основном частичная прозрачность используется для создания «мягких краев» графики, чтобы они сливались с фоном. Смотрите также монохромный или с оттенками серого и сглаживание . Частичная прозрачность также может использоваться, чтобы сделать изображение менее заметным, например водяной знак или другой логотип; или для визуализации чего-то прозрачного, например, призрачного привидения в видеоигре. Анимация альфа-канала в программе редактирования изображений может обеспечить плавные переходы между разными изображениями.

Читайте также:  Как выбирают цвет металлокерамики

Процесс комбинирования частично прозрачного цвета с его фоном («композитинг») часто не определен, и результаты могут быть не во всех случаях одинаковыми. Например, если используется цветокоррекция, следует ли комбинировать цвета до или после цветокоррекции?

Прозрачность по обтравочному контуру

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

Составление расчетов

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

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

Цвет в точке, где должны сочетаться цвета G1 и G2, равен ( G1 + G2 ) / 2 . Вот некоторые последствия этого:

  • Если цвета равны, результат будет того же цвета, потому что ( G1 + G1 ) /2 = G1 .
  • Если один цвет (G1) белый (0,0), результат будет G2 / 2 . Это всегда будет меньше любого ненулевого значения G2, поэтому результат будет белее, чем G2. (Это легко изменить в случае, когда G2 белый).
  • Если один цвет (G1) черный (1.0), результат будет ( G2 + 1 ) / 2 . Это всегда будет больше, чем G2, поэтому результат будет чернее, чем G2.
  • Формула коммутативна, так как ( G1 + G2 ) / 2 = ( G2 + G1 ) / 2 . Это означает, что не имеет значения, в каком порядке смешиваются две графики, т. Е. Какая из двух находится наверху, а какая внизу.
  • Формула неассоциативна, так как

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

Хотя формула проста, она может быть не идеальной. Человеческое восприятие яркости не является линейным — мы не обязательно считаем, что значение серого 0,5 находится на полпути между черным и белым. Такие детали могут не иметь значения, когда прозрачность используется только для смягчения краев, но в более сложных проектах это может иметь значение. Большинству людей, серьезно работающих с прозрачностью, нужно будет увидеть результаты и поиграть с цветами или (где возможно) с алгоритмом, чтобы получить нужные им результаты.

Эту формулу можно легко обобщить для цвета RGB или CMYK , применив формулу к каждому каналу отдельно. Например, финал red = ( R1 + R2 ) / 2 . Но не для всех цветовых моделей. Например, цвет лаборатории дал бы удивительные результаты.

Альтернативная модель состоит в том, что в каждой точке каждого элемента, который должен быть объединен для обеспечения прозрачности, есть связанный цвет и непрозрачность от 0 до 1. Для каждого цветового канала вы можете работать с этой моделью: если канал с интенсивностью G2 и непрозрачностью T2 перекрывает канал с интенсивностью G1 и непрозрачностью T1 результатом будет канал с такой же интенсивностью (1 — T2) * G1 + G2 и непрозрачностью 1 — (1 — T2) * (1 — T1) . Перед композицией каждый канал должен быть умножен на соответствующее значение альфа-канала (так называемое предварительное умножение альфа ). В спецификации файла SVG используется этот тип смешивания, и это одна из моделей, которые можно использовать в PDF.

Таким образом могут быть реализованы альфа-каналы, где альфа-канал обеспечивает уровень непрозрачности, который одинаково применяется ко всем другим каналам. Чтобы работать с приведенной выше формулой, непрозрачность необходимо масштабировать до диапазона от 0 до 1, независимо от его внешнего представления (часто от 0 до 255 при использовании 8-битных выборок, таких как «RGBA»).

Читайте также:  Китайский фрукт красного цвета

Прозрачность в PDF

Начиная с версии 1.4 стандарта PDF ( Adobe Acrobat версии 5), поддерживается прозрачность (включая полупрозрачность). Прозрачность в файлах PDF позволяет создателям добиваться различных эффектов, включая добавление теней к объектам, создание полупрозрачных объектов и слияние объектов друг с другом или с текстом. PDF поддерживает множество различных режимов наложения, а не только наиболее распространенный метод усреднения, а правила наложения множества перекрывающихся объектов допускают выбор (например, смешивается ли группа объектов перед смешиванием с фоном или каждый объект по очереди смешивается на задний план).

Прозрачность PDF — это очень сложная модель, ее исходная спецификация Adobe содержит более 100 страниц. Ключевым источником сложности является то, что смешивание объектов с разными цветовыми пространствами может быть сложным и подверженным ошибкам, а также вызывать проблемы совместимости . Прозрачность в PDF была разработана так, чтобы не вызывать ошибок в программах просмотра PDF, которые ее не понимали — они просто отображали все элементы как полностью непрозрачные. Однако это был обоюдоострый меч, поскольку пользователи старых программ просмотра, PDF-принтеров и т. Д. Могли видеть или распечатывать что-то совершенно отличное от исходного дизайна.

Тот факт, что модель прозрачности PDF настолько сложна, означает, что она плохо поддерживается. Это означает, что RIP и принтеры часто имеют проблемы с печатью PDF-файлов с прозрачностью. Решением для этого является либо растрирование изображения, либо применение к PDF-файлу сглаживания векторной прозрачности. Однако выравнивание векторной прозрачности чрезвычайно сложно и поддерживается только несколькими специализированными пакетами.

Прозрачность в PostScript

Язык PostScript имеет ограниченную поддержку полной (а не частичной) прозрачности в зависимости от уровня PostScript. Частичная прозрачность доступна с расширением pdfmark, доступным во многих реализациях PostScript.

1-й уровень

PostScript уровня 1 обеспечивает прозрачность двумя способами:

  • Однобитовое (монохромное) изображение можно рассматривать как маску. В этом случае 1-биты могут быть окрашены в любой единственный цвет, а 0-биты вообще не окрашены. Этот метод нельзя распространить на более чем один цвет или векторные фигуры.
  • Можно определить пути отсечения. Они ограничивают то, какую часть всей последующей графики можно увидеть. Это можно использовать для любого типа графики, однако на уровне 1 максимальное количество узлов в пути часто было ограничено до 1500, поэтому сложные пути (например, обрезка волос на фотографии головы человека) часто терпели неудачу.

Уровень 2

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

Уровень 3

PostScript уровня 3 добавляет дополнительную опцию прозрачности для любого растрового изображения. Может применяться прозрачный цвет или диапазон цветов; или отдельная 1-битная маска может использоваться для предоставления альфа-канала.

Инкапсулированный PostScript

Файлы EPS содержат PostScript, который может быть уровня 1, 2 или 3 и может использовать указанные выше функции. Более тонкая проблема возникает с предварительным просмотром файлов EPS, которые обычно используются для отображения представления файла EPS на экране. Есть эффективные методы настройки прозрачности в предварительном просмотре. Например, предварительный просмотр TIFF может использовать альфа-канал TIFF. Однако многие приложения не используют эту информацию о прозрачности и поэтому отображают предварительный просмотр в виде прямоугольника. Полупатентованный метод, впервые примененный в Photoshop и принятый рядом приложений допечатной подготовки, заключается в хранении контура обрезки в стандартном месте EPS и использовании его для отображения.

Кроме того, некоторые программы, которые генерируют предварительный просмотр EPS, будут генерировать информацию о прозрачности в предварительном просмотре.

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

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

Источник