Товаров: 0 (0р.)

Rgba прозрачность: Прозрачность элементов CSS

Содержание

background-color — CSS | MDN

CSS-свойство background-color CSS устанавливает цвет фона элемента.


background-color: red;


background-color: #bbff00;


background-color: #11ffee00; 
background-color: #11ffeeff; 


background-color: rgb(255, 255, 128);


background-color: rgba(117, 190, 218, 0.0); 
background-color: rgba(117, 190, 218, 0.5); 
background-color: rgba(117, 190, 218, 1.0); 


background-color: hsla(50, 33%, 25%, 0.75);


background-color: currentColor;
background-color: transparent;


background-color: inherit;
background-color: initial;
background-color: unset;
Свойство background-color определяется единственным значением <color>.

Значения

<color>
Является CSS <color>, которое описывает цвет фона. Даже если заданы одно или несколько background-image, цвет может отрендерится, если изображения прозрачны.

Формальный синтаксис

<color>
где 
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

HTML

 
<div>
 Lorem ipsum dolor sit amet, consectetuer
</div>

<div>
  Lorem ipsum dolor sit amet, consectetuer
</div>

<div>
  Lorem ipsum dolor sit amet, consectetuer
</div>

CSS

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Результат

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

BCD tables only load in the browser

Знакомимся с CSS3. Секреты прозрачного фона и модель RGBa

Продолжим знакомство с некоторыми, не совсем очевидными, свойствами CSS3. Одно из таких свойств — прозрачность фонового цвета, заданная в формате RGBa или HSLa.

Не пугайтесь последнего названия HSLa — Hue (оттенок), Saturate (насыщенность) и Lightness (яркость). Буква «A» на конце аббревиатуры означает «альфа» (хорошо знакомо любителям Photoshop) и отвечает за величину прозрачности цвета.

Напрашивается резонный вопрос, для чего в таком случае нужно свойство оpacity (прозрачность) и в чем разница?

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

Однако это не совсем так и тут есть довольно тонкий момент при использовании свойства opacity. Действительно, создавая полупрозрачный div (opacity:0.5), любой вложенный в этот div элемент будет также полупрозрачным. Тонкость в том, что у вложенных элементов непрозрачность идет относительно предка, а не абсолютная. То есть, дочерний элемент не может получить абсолютную видимость выше, чем у предка. Итоговая opacity для элемента вычисляется как произведение opacity этого элемента и opacity всех его предков.

Пример ниже наглядно демонстрирует работу свойства opacity: (в div-блок с белым фоном и прозрачностью 50%, вложена картинка и текст, кроме того у блока задана рамка в 1px белого цвета)

opacity:0.5

Свойство opacity (прозрачность) родительского блока <div> наследуется всеми дочерними элементами.

А теперь смотрим этот же пример, но фон у div-блока задан через CSS3-свойство

background-color: rgba(255,255,255,0.5)

background-color: rgba(255,255,255,0.5)

Фоновый цвет блока <div> задан в формате RGBA, который не наследуется дочерними элементами.

На этот раз, все наши элементы, кроме div-блока, остались непрозрачными. Естественно, данный способ сработает только в тех браузерах, которые поддерживают данные возможности CSS3. В очередной раз надеюсь, что парни из Редмонда перестанут изобретать велосипед и присоединятся к большинству.

Подписывайтесь на канал Яндекс.Дзен и узнавайте первыми о новых материалах, опубликованных на сайте.

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Операции с цветами | Документация по Sass на русском языке

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

scss

p {
  color: #010203 + #040506;
}

 
p 
  color: #010203 + #040506

вычислит 01 + 04 = 05, 02 + 05 = 07, и 03 + 06 = 09, в результате будет получен цвет:

css


p {
  color: #050709;
}

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

scss

p {
  color: #010203 * 2;
}

p 
  color: #010203 * 2

вычислит 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06 и преобразуется в:

css


p {
  color: #020406;
}

Обратите внимание, что цвета с альфа-каналом (те, которые создаются через rgba или hsla функции) должны иметь одинаковое значение прозрачности для того, чтобы проводить с ними арифметические операции, поскольку арифметика не влияет на значение альфа-канала. Например:

scss

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

p 
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75)

css

p {
  color: rgba(255, 255, 0, 0.75); 
}

Альфа-канал цвета можно регулировать с помощью функций opacify и transparentize. Например:

scss

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

$translucent-red: rgba(255, 0, 0, 0.5)
p 
  color: opacify($translucent-red, 0.3)
  background-color: transparentize($translucent-red, 0.25)

css

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

IE фильтры требуют, чтобы все цвета включали в себя альфа-слой, и были в строгом формате #AABBCCDD. Вы можете легко конвертировать цвет с помощью функции ie_hex_str. Например:

scss

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
          startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

$translucent-red: rgba(255, 0, 0, 0.5)
$green: #00ff00
div
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
          startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}')

css

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
          startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

Способы создания прозрачных фонов у блоков в CSS

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

Как задать прозрачность?

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

  • Свойство opacity.
  • Использование PNG -картинки
  • Формат системы RGBA
  • Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

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

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="all" type="text/css" href="css/style2.css" /> 
    </head>
      <body>
  <div>
   Тут будет много Вашего текста
  </div>
    </body>
</html>

CSS:

body {
    background: url(./vaden-pro-logo.png); /* Фон для тела страницы  */
   }
   . prozrachen {
    padding: 10px; /*Отступы для текста*/
    background: darkturquoise; /* Задаем цвет фона */
    margin: 0 auto; /* Центрируем блок */
    width: 50%; /* Задаем ширину блока */
 
    opacity: 0.7; /* Задаем прозрачность */
    font: 48px/64px Times New Roman;
    text-align: justify;
   }

В результате мы получили полупрозрачный блок:

Важно!!!

  1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
  2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:
     
filter: alpha(Opacity=70);
 

    Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:

    • с абсолютным позиционированием (position: absolute)
    • с фиксированным линейным размером (height или width).
  3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

  1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

  2. Используем ее в качестве бэкграунда:
    body {
     background: url(./vaden-pro-logo.png); 
     }
    .prozrachen {
     padding: 10px; 
     background: url(./transparent.png);
     margin: 0 auto; 
     width: 50%; 
     font: 48px/64px Times New Roman;
    color: white;</li>
    text-align: justify;
   }

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

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только для фона
  2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
  3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
  4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

background: rgba(r, g, b, a);

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body {
    background: url(./vaden-pro-logo.png); /* Фоновый рисунок  */
   }
   .prozrachen {
    padding: 10px; 
    background: rgba(0, 206, 209, 0.7); 
    margin: 0 auto; 
    width: 50%; 
    font: 48px/64px Times New Roman;
    color: white;
    text-align: justify;
   }

Важно!!!

  1. В отличии от свойства opacity прозрачность задается только фону
  2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
  3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

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

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Важно!!!

  1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
  2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

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

Успехов!!!

Оценок: 10 (средняя 5 из 5)

  • 31885 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

В чем разница между свойством прозрачности и значением rgba?

Многие начинающие веб-разработчики и веб-дизайнеры путают значение rgba и его эквивалент hsla со свойством прозрачности, используя их взаимозаменяемо до тех пор, пока не получат не имеющий смысла видимый результат. Это можно понять, так как и свойство прозрачности, и a, часть значения rgba, относятся к одному и тому же: уровню прозрачности. Но их применение и эффект сильно отличаются:

 

 

• Прозрачность — это свойство, а a – это часть значения свойства цвета, такого как цвет фона, цвет тени блока или цвет рамки.

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

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

<div>
        <p>There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling the transmission. We will control the horizontal, we will control the vertical.
</div>
<div>
        <p><img src=the-twilight-zone.png alt="The Twilight Zone">We can change the focus to a soft blur or sharpen it to crystal clarity. For the next hour, sit quietly and we will control all that you see and hear.
</div>

После это код CSS:

body {
        background: #444;
}
div {
        width: 20em;
        padding: 3em;
        position: absolute;
        border: 5px double #000;
        color: white;
}
div p {
        margin: 0;
        text-align: justify;
}
div#lower {
        background-color: rgb(0, 0, 127);
}
div img {
        width: 200px;
        height: 150px;
        float: right;
        margin-left: 3em;
        margin-bottom: 3em;
}
div#upper {
        left: 18em;
        top: 8em;
        background-color: rgba(0, 0, 0, 1);
}

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

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

div#upper {
        left: 17em; top: 7em;
        background-color: rgba(255, 255, 0, 0.5);
}

Давайте вернем цвет фона к изначальному значению и добавим свойство прозрачности. По умолчанию его значение 1, так что задание свойства с этим значением не приведет ни к каким изменениям. Если же задать значение как 0.25, то изменения будут очень заметны. Как можно увидеть ниже, весь блок, включая цвет фона, содержимое, границу и изображение, теперь полупрозрачный.

div#upper {
        left: 19em; top: 9em;
        background-color: rgba(0, 0, 0, 1);
        opacity: 0.25;
}

Очевидно, что это совершенно другой эффект.

Автор урока Dudley Storey

Смотрите также:

CSS — Прозрачность » Pechenek.NET

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

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

Прозрачность в CSS выглядит как opacity, и регулируется в рамках диапазона чисел с типом float (с плавающей запятой). Соответственно имеет значения от 0.0 до 1.0. Как ни странно это свойство применимо абсолютно ко всем элементам веб-страницы. Соответственно вы можете управлять прозрачностью всех элементов страницы. Давайте рассмотрим несколько примеров:

Немного рандомного текста про прозрачность в CSS.

В этом случае opacity равна 1. Уменьшим ее до 0.5:

Теперь прозрачность этого блока равна 0.5 единиц.

Как видите весь блок стал полупрозрачным. Теперь поступим иначе и обратимся к темной магии веб-программирования. Создадим внутри блока span и внутри него пропишем opacity равной 0.5 единиц, а из блока выше уберем это свойство:

Теперь в это блоке только у текста прозрачность равна 0.5 единиц.

Далее применим свойство opacity, к свойству background. Но если в случае с другими элементами все понятно, то теперь background, превращается в background-color: rgba(233,233,233, 0.1):

Теперь в это блоке только у текста прозрачность равна 0.5 единиц.

Конструкция свойства background-color: rgba(*,*,*,0.*) уже содержит в себе возможность использования свойства opacity. Соответственно нет надобности в том, чтобы отдельно для фона создавать например класс и настраивать у него прозрачность.

Несколько правил прозрачности css:

  • не всей свойства css имеют встроенную возможность настройки opacity
  • каждый раз настраивая прозрачность помните, что элементы расположенные “сзади” (выше по иерархии) буду становится видны.
  • не стоит усердствовать со свойством opacity, лучше работать с фоном.
  • настройка прозрачности не всегда уместна даже для изображений.

Итог

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

Чтобы не пропускать новые статьи подписывайте на нашу группу в ВК и ФБ, а так же каналы в телеграме и на ютубе!

Перечисление цветов Color, а также функции ColorFade, ColorValue и RGBA в Power Apps — Power Apps

Color.AliceBlueColorValue( «#f0f8ff» )
ColorValue( «aliceblue» )		RGBA( 240, 248, 255, 1 )
Color.AntiqueWhiteColorValue( «#faebd7» )
ColorValue( «AntiqueWhite» )		RGBA( 250, 235, 215, 1 )
Color.AquaColorValue( «#00ffff» )
ColorValue( «AQUA» )		RGBA( 0, 255, 255, 1 )
Color.AquamarineColorValue( «#7fffd4» )
ColorValue( «Aquamarine» )		RGBA( 127, 255, 212, 1 )
Color.AzureColorValue( «#f0ffff» )
ColorValue( «azure» )		RGBA( 240, 255, 255, 1 )
Color.BeigeColorValue( «#f5f5dc» )
ColorValue( «Beige» )		RGBA( 245, 245, 220, 1 )
Color.BisqueColorValue( «#ffe4c4» )
ColorValue( «BISQUE» )		RGBA( 255, 228, 196, 1 )
Color.BlackColorValue( «#000000» )
ColorValue( «Black» )		RGBA( 0, 0, 0, 1 )
Color.BlanchedAlmondColorValue( «#ffebcd» )
ColorValue( «blanchedalmond» )		RGBA( 255, 235, 205, 1 )
Color.BlueColorValue( «#0000ff» )
ColorValue( «Blue» )		RGBA( 0, 0, 255, 1 )
Color.BlueVioletColorValue( «#8a2be2» )
ColorValue( «BLUEVIOLET» )		RGBA( 138, 43, 226, 1 )
Color.BrownColorValue( «#a52a2a» )
ColorValue( «Brown» )		RGBA( 165, 42, 42, 1 )
Color.BurlywoodColorValue( «#deb887» )
ColorValue( «burlywood» )		RGBA( 222, 184, 135, 1 )
Color.CadetBlueColorValue( «#5f9ea0» )
ColorValue( «CadetBlue» )		RGBA( 95, 158, 160, 1 )
Color.ChartreuseColorValue( «#7fff00» )
ColorValue( «CHARTREUSE» )		RGBA( 127, 255, 0, 1 )
Color.ChocolateColorValue( «#d2691e» )
ColorValue( «Chocolate» )		RGBA( 210, 105, 30, 1 )
Color.CoralColorValue( «#ff7f50» )
ColorValue( «coral» )		RGBA( 255, 127, 80, 1 )
Color.CornflowerBlueColorValue( «#6495ed» )
ColorValue( «CornflowerBlue» )		RGBA( 100, 149, 237, 1 )
Color.CornsilkColorValue( «#fff8dc» )
ColorValue( «CORNSILK» )		RGBA( 255, 248, 220, 1 )
Color.CrimsonColorValue( «#dc143c» )
ColorValue( «Crimson» )		RGBA( 220, 20, 60, 1 )
Color.CyanColorValue( «#00ffff» )
ColorValue( «cyan» )		RGBA( 0, 255, 255, 1 )
Color.DarkBlueColorValue( «#00008b» )
ColorValue( «DarkBlue» )		RGBA( 0, 0, 139, 1 )
Color.DarkCyanColorValue( «#008b8b» )
ColorValue( «DARKCYAN» )		RGBA( 0, 139, 139, 1 )
Color.DarkGoldenRodColorValue( «#b8860b» )
ColorValue( «DarkGoldenRod» )		RGBA( 184, 134, 11, 1 )
Color.DarkGrayColorValue( «#a9a9a9» )
ColorValue( «darkgray» )		RGBA( 169, 169, 169, 1 )
Color.DarkGreenColorValue( «#006400» )
ColorValue( «DarkGreen» )		RGBA( 0, 100, 0, 1 )
Color.DarkGreyColorValue( «#a9a9a9» )
ColorValue( «DARKGREY» )		RGBA( 169, 169, 169, 1 )
Color.DarkKhakiColorValue( «#bdb76b» )
ColorValue( «DarkKhaki» )		RGBA( 189, 183, 107, 1 )
Color.DarkMagentaColorValue( «#8b008b» )
ColorValue( «darkmagenta» )		RGBA( 139, 0, 139, 1 )
Color.DarkOliveGreenColorValue( «#556b2f» )
ColorValue( «DarkOliveGreen» )		RGBA( 85, 107, 47, 1 )
Color.DarkOrangeColorValue( «#ff8c00» )
ColorValue( «DARKORANGE» )		RGBA( 255, 140, 0, 1 )
Color.DarkOrchidColorValue( «#9932cc» )
ColorValue( «DarkOrchid» )		RGBA( 153, 50, 204, 1 )
Color.DarkRedColorValue( «#8b0000» )
ColorValue( «darkred» )		RGBA( 139, 0, 0, 1 )
Color.DarkSalmonColorValue( «#e9967a» )
ColorValue( «DarkSalmon» )		RGBA( 233, 150, 122, 1 )
Color.DarkSeaGreenColorValue( «#8fbc8f» )
ColorValue( «DARKSEAGREEN» )		RGBA( 143, 188, 143, 1 )
Color.DarkSlateBlueColorValue( «#483d8b» )
ColorValue( «DarkSlateBlue» )		RGBA( 72, 61, 139, 1 )
Color.DarkSlateGrayColorValue( «#2f4f4f» )
ColorValue( «darkslategray» )		RGBA( 47, 79, 79, 1 )
Color.DarkSlateGreyColorValue( «#2f4f4f» )
ColorValue( «DarkSlateGrey» )		RGBA( 47, 79, 79, 1 )
Color.DarkTurquoiseColorValue( «#00ced1» )
ColorValue( «DARKTURQUOISE» )		RGBA( 0, 206, 209, 1 )
Color.DarkVioletColorValue( «#9400d3» )
ColorValue( «DarkViolet» )		RGBA( 148, 0, 211, 1 )
Color.DeepPinkColorValue( «#ff1493» )
ColorValue( «deeppink» )		RGBA( 255, 20, 147, 1 )
Color.DeepSkyBlueColorValue( «#00bfff» )
ColorValue( «DeepSkyBlue» )		RGBA( 0, 191, 255, 1 )
Color.DimGrayColorValue( «#696969» )
ColorValue( «DIMGRAY» )		RGBA( 105, 105, 105, 1 )
Color.DimGreyColorValue( «#696969» )
ColorValue( «DimGrey» )		RGBA( 105, 105, 105, 1 )
Color.DodgerBlueColorValue( «#1e90ff» )
ColorValue( «dodgerblue» )		RGBA( 30, 144, 255, 1 )
Color.FireBrickColorValue( «#b22222» )
ColorValue( «FireBrick» )		RGBA( 178, 34, 34, 1 )
Color.FloralWhiteColorValue( «#fffaf0» )
ColorValue( «FLORALWHITE» )		RGBA( 255, 250, 240, 1 )
Color.ForestGreenColorValue( «#228b22» )
ColorValue( «ForestGreen» )		RGBA( 34, 139, 34, 1 )
Color.FuchsiaColorValue( «#ff00ff» )
ColorValue( «fuchsia» )		RGBA( 255, 0, 255, 1 )
Color.GainsboroColorValue( «#dcdcdc» )
ColorValue( «Gainsboro» )		RGBA( 220, 220, 220, 1 )
Color.GhostWhiteColorValue( «#f8f8ff» )
ColorValue( «GHOSTWHITE» )		RGBA( 248, 248, 255, 1 )
Color.GoldColorValue( «#ffd700» )
ColorValue( «Gold» )		RGBA( 255, 215, 0, 1 )
Color.GoldenRodColorValue( «#daa520» )
ColorValue( «goldenrod» )		RGBA( 218, 165, 32, 1 )
Color.GrayColorValue( «#808080» )
ColorValue( «Gray» )		RGBA( 128, 128, 128, 1 )
Color.GreenColorValue( «#008000» )
ColorValue( «GREEN» )		RGBA( 0, 128, 0, 1 )
Color.GreenYellowColorValue( «#adff2f» )
ColorValue( «GreenYellow» )		RGBA( 173, 255, 47, 1 )
Color.GreyColorValue( «#808080» )
ColorValue( «grey» )		RGBA( 128, 128, 128, 1 )
Color.HoneydewColorValue( «#f0fff0» )
ColorValue( «Honeydew» )		RGBA( 240, 255, 240, 1 )
Color.HotPinkColorValue( «#ff69b4» )
ColorValue( «HOTPINK» )		RGBA( 255, 105, 180, 1 )
Color.IndianRedColorValue( «#cd5c5c» )
ColorValue( «IndianRed» )		RGBA( 205, 92, 92, 1 )
Color.IndigoColorValue( «#4b0082» )
ColorValue( «indigo» )		RGBA( 75, 0, 130, 1 )
Color.IvoryColorValue( «#fffff0» )
ColorValue( «Ivory» )		RGBA( 255, 255, 240, 1 )
Color.KhakiColorValue( «#f0e68c» )
ColorValue( «KHAKI» )		RGBA( 240, 230, 140, 1 )
Color.LavenderColorValue( «#e6e6fa» )
ColorValue( «Lavender» )		RGBA( 230, 230, 250, 1 )
Color.LavenderBlushColorValue( «#fff0f5» )
ColorValue( «lavenderblush» )		RGBA( 255, 240, 245, 1 )
Color.LawnGreenColorValue( «#7cfc00» )
ColorValue( «LawnGreen» )		RGBA( 124, 252, 0, 1 )
Color.LemonChiffonColorValue( «#fffacd» )
ColorValue( «LEMONCHIFFON» )		RGBA( 255, 250, 205, 1 )
Color.LightBlueColorValue( «#add8e6» )
ColorValue( «LightBlue» )		RGBA( 173, 216, 230, 1 )
Color.LightCoralColorValue( «#f08080» )
ColorValue( «lightcoral» )		RGBA( 240, 128, 128, 1 )
Color.LightCyanColorValue( «#e0ffff» )
ColorValue( «LightCyan» )		RGBA( 224, 255, 255, 1 )
Color.LightGoldenRodYellowColorValue( «#fafad2» )
ColorValue( «lightgoldenrodyellow» )		RGBA( 250, 250, 210, 1 )
Color.LightGrayColorValue( «#d3d3d3» )
ColorValue( «LightGray» )		RGBA( 211, 211, 211, 1 )
Color.LightGreenColorValue( «#90ee90» )
ColorValue( «lightgreen» )		RGBA( 144, 238, 144, 1 )
Color.LightGreyColorValue( «#d3d3d3» )
ColorValue( «LightGrey» )		RGBA( 211, 211, 211, 1 )
Color.LightPinkColorValue( «#ffb6c1» )
ColorValue( «LIGHTPINK» )		RGBA( 255, 182, 193, 1 )
Color.LightSalmonColorValue( «#ffa07a» )
ColorValue( «LightSalmon» )		RGBA( 255, 160, 122, 1 )
Color.LightSeaGreenColorValue( «#20b2aa» )
ColorValue( «lightseagreen» )		RGBA( 32, 178, 170, 1 )
Color.LightSkyBlueColorValue( «#87cefa» )
ColorValue( «LightSkyBlue» )		RGBA( 135, 206, 250, 1 )
Color.LightSlateGrayColorValue( «#778899» )
ColorValue( «LIGHTSLATEGRAY» )		RGBA( 119, 136, 153, 1 )
Color.LightSlateGreyColorValue( «#778899» )
ColorValue( «LightSlateGrey» )		RGBA( 119, 136, 153, 1 )
Color.LightSteelBlueColorValue( «#b0c4de» )
ColorValue( «lightsteelblue» )		RGBA( 176, 196, 222, 1 )
Color.LightYellowColorValue( «#ffffe0» )
ColorValue( «LightYellow» )		RGBA( 255, 255, 224, 1 )
Color.LimeColorValue( «#00ff00» )
ColorValue( «LIME» )		RGBA( 0, 255, 0, 1 )
Color.LimeGreenColorValue( «#32cd32» )
ColorValue( «LimeGreen» )		RGBA( 50, 205, 50, 1 )
Color.LinenColorValue( «#faf0e6» )
ColorValue( «linen» )		RGBA( 250, 240, 230, 1 )
Color.MagentaColorValue( «#ff00ff» )
ColorValue( «Magenta» )		RGBA( 255, 0, 255, 1 )
Color.MaroonColorValue( «#800000» )
ColorValue( «MAROON» )		RGBA( 128, 0, 0, 1 )
Color.MediumAquamarineColorValue( «#66cdaa» )
ColorValue( «MediumAquamarine» )		RGBA( 102, 205, 170, 1 )
Color.MediumBlueColorValue( «#0000cd» )
ColorValue( «mediumblue» )		RGBA( 0, 0, 205, 1 )
Color.MediumOrchidColorValue( «#ba55d3» )
ColorValue( «MediumOrchid» )		RGBA( 186, 85, 211, 1 )
Color.MediumPurpleColorValue( «#9370db» )
ColorValue( «MEDIUMPURPLE» )		RGBA( 147, 112, 219, 1 )
Color.MediumSeaGreenColorValue( «#3cb371» )
ColorValue( «MediumSeaGreen» )		RGBA( 60, 179, 113, 1 )
Color.MediumSlateBlueColorValue( «#7b68ee» )
ColorValue( «mediumslateblue» )		RGBA( 123, 104, 238, 1 )
Color.MediumSpringGreenColorValue( «#00fa9a» )
ColorValue( «MediumSpringGreen» )		RGBA( 0, 250, 154, 1 )
Color.MediumTurquoiseColorValue( «#48d1cc» )
ColorValue( «MEDIUMTURQUOISE» )		RGBA( 72, 209, 204, 1 )
Color.MediumVioletRedColorValue( «#c71585» )
ColorValue( «MediumVioletRed» )		RGBA( 199, 21, 133, 1 )
Color.MidnightBlueColorValue( «#191970» )
ColorValue( «midnightblue» )		RGBA( 25, 25, 112, 1 )
Color.MintCreamColorValue( «#f5fffa» )
ColorValue( «MintCream» )		RGBA( 245, 255, 250, 1 )
Color.MistyRoseColorValue( «#ffe4e1» )
ColorValue( «MISTYROSE» )		RGBA( 255, 228, 225, 1 )
Color.MoccasinColorValue( «#ffe4b5» )
ColorValue( «Moccasin» )		RGBA( 255, 228, 181, 1 )
Color.NavajoWhiteColorValue( «#ffdead» )
ColorValue( «navajowhite» )		RGBA( 255, 222, 173, 1 )
Color.NavyColorValue( «#000080» )
ColorValue( «Navy» )		RGBA( 0, 0, 128, 1 )
Color.OldLaceColorValue( «#fdf5e6» )
ColorValue( «OLDLACE» )		RGBA( 253, 245, 230, 1 )
Color.OliveColorValue( «#808000» )
ColorValue( «Olive» )		RGBA( 128, 128, 0, 1 )
Color.OliveDrabColorValue( «#6b8e23» )
ColorValue( «olivedrab» )		RGBA( 107, 142, 35, 1 )
Color.OrangeColorValue( «#ffa500» )
ColorValue( «Orange» )		RGBA( 255, 165, 0, 1 )
Color.OrangeRedColorValue( «#ff4500» )
ColorValue( «ORANGERED» )		RGBA( 255, 69, 0, 1 )
Color.OrchidColorValue( «#da70d6» )
ColorValue( «Orchid» )		RGBA( 218, 112, 214, 1 )
Color.PaleGoldenRodColorValue( «#eee8aa» )
ColorValue( «palegoldenrod» )		RGBA( 238, 232, 170, 1 )
Color.PaleGreenColorValue( «#98fb98» )
ColorValue( «PaleGreen» )		RGBA( 152, 251, 152, 1 )
Color.PaleTurquoiseColorValue( «#afeeee» )
ColorValue( «PALETURQUOISE» )		RGBA( 175, 238, 238, 1 )
Color.PaleVioletRedColorValue( «#db7093» )
ColorValue( «PaleVioletRed» )		RGBA( 219, 112, 147, 1 )
Color.PapayaWhipColorValue( «#ffefd5» )
ColorValue( «papayawhip» )		RGBA( 255, 239, 213, 1 )
Color.PeachPuffColorValue( «#ffdab9» )
ColorValue( «PeachPuff» )		RGBA( 255, 218, 185, 1 )
Color.PeruColorValue( «#cd853f» )
ColorValue( «PERU» )		RGBA( 205, 133, 63, 1 )
Color.PinkColorValue( «#ffc0cb» )
ColorValue( «Pink» )		RGBA( 255, 192, 203, 1 )
Color.PlumColorValue( «#dda0dd» )
ColorValue( «plum» )		RGBA( 221, 160, 221, 1 )
Color.PowderBlueColorValue( «#b0e0e6» )
ColorValue( «PowderBlue» )		RGBA( 176, 224, 230, 1 )
Color.PurpleColorValue( «#800080» )
ColorValue( «PURPLE» )		RGBA( 128, 0, 128, 1 )
Color.RedColorValue( «#ff0000» )
ColorValue( «Red» )		RGBA( 255, 0, 0, 1 )
Color.RosyBrownColorValue( «#bc8f8f» )
ColorValue( «rosybrown» )		RGBA( 188, 143, 143, 1 )
Color.RoyalBlueColorValue( «#4169e1» )
ColorValue( «RoyalBlue» )		RGBA( 65, 105, 225, 1 )
Color.SaddleBrownColorValue( «#8b4513» )
ColorValue( «SADDLEBROWN» )		RGBA( 139, 69, 19, 1 )
Color.SalmonColorValue( «#fa8072» )
ColorValue( «Salmon» )		RGBA( 250, 128, 114, 1 )
Color.SandyBrownColorValue( «#f4a460» )
ColorValue( «sandybrown» )		RGBA( 244, 164, 96, 1 )
Color.SeaGreenColorValue( «#2e8b57» )
ColorValue( «SeaGreen» )		RGBA( 46, 139, 87, 1 )
Color.SeaShellColorValue( «#fff5ee» )
ColorValue( «SEASHELL» )		RGBA( 255, 245, 238, 1 )
Color.SiennaColorValue( «#a0522d» )
ColorValue( «Sienna» )		RGBA( 160, 82, 45, 1 )
Color.SilverColorValue( «#c0c0c0» )
ColorValue( «silver» )		RGBA( 192, 192, 192, 1 )
Color.SkyBlueColorValue( «#87ceeb» )
ColorValue( «SkyBlue» )		RGBA( 135, 206, 235, 1 )
Color.SlateBlueColorValue( «#6a5acd» )
ColorValue( «SLATEBLUE» )		RGBA( 106, 90, 205, 1 )
Color.SlateGrayColorValue( «#708090» )
ColorValue( «SlateGray» )		RGBA( 112, 128, 144, 1 )
Color.SlateGreyColorValue( «#708090» )
ColorValue( «slategrey» )		RGBA( 112, 128, 144, 1 )
Color.SnowColorValue( «#fffafa» )
ColorValue( «Snow» )		RGBA( 255, 250, 250, 1 )
Color.SpringGreenColorValue( «#00ff7f» )
ColorValue( «SPRINGGREEN» )		RGBA( 0, 255, 127, 1 )
Color.SteelBlueColorValue( «#4682b4» )
ColorValue( «SteelBlue» )		RGBA( 70, 130, 180, 1 )
Color.TanColorValue( «#d2b48c» )
ColorValue( «tan» )		RGBA( 210, 180, 140, 1 )
Color.TealColorValue( «#008080» )
ColorValue( «Teal» )		RGBA( 0, 128, 128, 1 )
Color.ThistleColorValue( «#d8bfd8» )
ColorValue( «THISTLE» )		RGBA( 216, 191, 216, 1 )
Color.TomatoColorValue( «#ff6347» )
ColorValue( «Tomato» )		RGBA( 255, 99, 71, 1 )
Color.TransparentColorValue( «#00000000» )
ColorValue( «Transparent» )		RGBA( 0, 0, 0, 0 )
Color.TurquoiseColorValue( «#40e0d0» )
ColorValue( «turquoise» )		RGBA( 64, 224, 208, 1 )
Color.VioletColorValue( «#ee82ee» )
ColorValue( «Violet» )		RGBA( 238, 130, 238, 1 )
Color.WheatColorValue( «#f5deb3» )
ColorValue( «WHEAT» )		RGBA( 245, 222, 179, 1 )
Color.WhiteColorValue( «#ffffff» )
ColorValue( «White» )		RGBA( 255, 255, 255, 1 )
Color.WhiteSmokeColorValue( «#f5f5f5» )
ColorValue( «whitesmoke» )		RGBA( 245, 245, 245, 1 )
Color.YellowColorValue( «#ffff00» )
ColorValue( «Yellow» )		RGBA( 255, 255, 0, 1 )
Color.YellowGreenColorValue( «#9acd32» )
ColorValue( «YELLOWGREEN» )		RGBA( 154, 205, 50, 1 )

Палитра цветов RGBA

Цветовое пространство RGB

Цветовое пространство — это математическая модель, используемая для представления физических цветов. Цветовое пространство RGB — это цветовое пространство, состоящее из трех каналов: красного, зеленого и синего, представляющих трехмерную информацию о цвете. Каждый канал представлен 8 битами, и значение каждого канала представляет собой значение от 0 до 255.

Цветовое пространство RGB представляет собой комбинацию красного, зеленого и синего компонентов аддитивного цвета. Компоненты RGB представлены математической моделью:

  R = красный (0 ≤ R ≤ 255)
G = зеленый (0 ≤ G ≤ 255)
B = синий (0 ≤ B ≤ 255)

В цветовом пространстве RGB интенсивность света каждого канала равна значению каждого канала.Например, если значение каждого канала установлено на 255, цвет визуализированного цветового пространства будет белым. Кроме того, если значение каждого канала установлено на 0, цвет визуализированного цветового пространства будет черным.

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

Цветовое пространство RGBA

Цветовое пространство RGBA — это цветовое пространство, которое включает дополнительный канал (альфа-канал) для представления информации о прозрачности изображения. Цвет RGBA состоит из четырех каналов, каждый из которых представлен 8 битами. В RGBA информация о прозрачности хранится в альфа-канале, а информация о цвете хранится в трех каналах RGB.

Альфа-канал может отображаться как изображение в градациях серого. Это означает, что альфа-канал состоит из 256 уровней прозрачности, где 0 представляет максимальный уровень прозрачности, а 255 представляет максимальный уровень непрозрачности.

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

Равные значения каждого канала представлены одним и тем же цветом в цветовом пространстве RGBA, но комбинация разных значений каждого канала приводит к разным цветам.

Цветовое пространство RGBA используется для расчета цвета каждого пикселя, который может отображаться на экране. Кроме того, можно получить доступ к альфа-каналу, чтобы сделать изображение прозрачным. Это означает, что если альфа-канал имеет значение 255 (непрозрачный), он не представляет собой прозрачный пиксель.

Другие цветовые пространства

Помимо цветовых пространств RGB и RGBA, существуют другие цветовые пространства, которые широко используются в программировании:

CMYK : Цветовое пространство CMYK — это цветовое пространство, которое используется для печати.Это цветовое пространство, состоящее из четырех каналов, где каждый канал представлен 8 битами. Цветовое пространство CMYK — это субтрактивное цветовое пространство, в котором цвет каждого канала создается путем вычитания цвета одного канала из остальных каналов. По крайней мере, один из каналов черный, и цвет этого канала известен как ключевой цвет. Другие каналы представляют собой цвета, смешанные с ключевым цветом, и цвет каждого канала определяется количеством смешанного ключевого цвета.

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

HSL : это цветовое пространство используется для представления цвета одного оттенка. Он представлен позицией на круге оттенков, яркостью и значением.

LAB : это цветовое пространство используется для представления цветов, включая яркость данного цвета. Он представлен положением на кривой, значением яркости и значением красного / зеленого / синего цветов.

Японская версия: カ ラ ー ピ ッ カ ー

opacity — CSS: Cascading Style Sheets

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

  непрозрачность: 0,9
непрозрачность: 90%


непрозрачность: наследование;
непрозрачность: начальная;
непрозрачность: вернуть;
непрозрачность: не установлено;

Значения

<альфа-значение>

A <число> в диапазоне 0,0 от до 1,0 включительно или <процент> в диапазоне 0% от до 100% включительно, представляющее непрозрачность канала (что есть значение его альфа-канала).Любое значение вне интервала, хотя и действительное, ограничивается ближайшим пределом в диапазоне.

Значение Значение
0 Элемент полностью прозрачный (то есть невидимый).
Любой <номер> строго между 0 и 1 Элемент полупрозрачный (то есть видно содержимое позади элемента).
1 (значение по умолчанию) Элемент полностью непрозрачный (визуально твердый).

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

Использование непрозрачности со значением, отличным от 1 помещает элемент в новый контекст наложения.

Чтобы изменить непрозрачность только фона, используйте свойство background со значением цвета , которое позволяет использовать альфа-канал. Например:

  фон: rgba (0, 0, 0, 0.4);

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

Коэффициент контрастности цвета определяется путем сравнения яркости текста с измененной непрозрачностью и значений цвета фона. Чтобы соответствовать текущим Рекомендациям по обеспечению доступности веб-содержимого (WCAG), требуется соотношение 4,5: 1 для текстового содержимого и 3: 1 для более крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.

Установка непрозрачности

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

HTML 
  
 Вы этого не видите. 


 Это легче увидеть. 


 Это очень легко увидеть.
CSS 
  div {цвет фона: желтый; font-weight: жирный; размер шрифта: 130%; }
.свет {
  непрозрачность: 0,2;
}
.Средняя {
  непрозрачность: 0,5;
}
.тяжелый {
  непрозрачность: 0,9;
}
Результат

Установка непрозрачности при наведении курсора

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

HTML 
  

  MDN Dino
CSS 
  img.opacity {
  непрозрачность: 1;
}

img.opacity: hover {
  непрозрачность: 0,5;
}

.wrapper {
  ширина: 200 пикселей;
  высота: 160 пикселей;
  цвет фона: # f03cc3;
  фоновое изображение: линейный градиент (90 градусов, прозрачный 50%,
  rgba (255,255,255, 0,5) 50%);
  размер фона: 20 пикселей 20 пикселей;
}
Результат

Таблицы BCD загружаются только в браузере

Прозрачность пикселей RGBa

Прозрачность пикселей RGBa Изображения

RGBa могут иметь разный уровень прозрачности для каждого отдельного пикселя изображения.Это достигается добавлением альфа-канала к трем основным каналам R, G и B. Эффект также известен как альфа-прозрачность. Сжатые изображения могут также использовать альфа-прозрачность, выбрав канал изображения, который будет использоваться в качестве альфа-канала, в диалоговом окне «Вид — Параметры отображения».

Внешний вид каждого пикселя в изображениях RGBa определяется четырьмя числами: тремя числами R, G и B, которые определяют цвет, и номером альфа-канала, который определяет прозрачность этого конкретного пикселя в диапазоне от 0 (полностью непрозрачный) до 255 (полностью прозрачный).Возможность работы с изображениями RGBa — одна из ключевых возможностей, которая отличает редактор изображений профессионального уровня, такой как Adobe PhotoShop или Manifold System, от графических редакторов потребительского уровня.

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

Для использования прозрачности пикселей RGBa:

1. Преобразуйте изображение в RGBa с помощью Image — Convert to

2а.Закрасьте любой серый цвет в альфа-канал изображения с помощью любого инструмента рисования; или

2б. Загрузите маску оттенков серого для альфа-канала, используя Edit — Load Mask / Channel

.

Прозрачность пикселей

RGBa работает только с изображениями RGBa. Если изображение преобразовано в любой другой тип (RGB, оттенки серого или палитра), эффекты частичной прозрачности будут потеряны.

Альфа-прозрачность не изменяет каналы R, G и B, которые определяют значение цвета пикселя.Когда нам кажется, что мы «стираем» пиксели с использованием альфа-прозрачности, пиксели и их исходные цветовые значения остаются. Они просто прозрачны, потому что для их значений альфа-канала установлено большое количество. Если мы изменим свое мнение о любых примененных эффектах прозрачности, мы сможем восстановить исходный вид пикселей, преобразовав изображение в изображение RGB.

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

Пример

Предположим, у нас есть изображение Европы, использующее в основном синие цвета.

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

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

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

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

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

На карте над синим изображением видно постепенный переход цвета с северо-запада на юго-восток.

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

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

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

Использование для альфа-прозрачности

· Создание сложных изображений с использованием множества слоев.

· Графические художественные эффекты. См. Пример в теме «Невидимые пиксели».

· Падающие тени, ореолы и «выделяющиеся элементы». См. Пример в теме «Размытие по Гауссу».

· «Растушеванные» переходы от одного изображения к другому.

· Эффекты цветового диапазона, как показано выше.

· Переходы между различными эффектами, такими как размытие в не размытые изображения.

· Тонкое растушевывание изображений для устранения сглаженных пикселей по краям «вырезов».

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

· Чтобы объединить плитки разных изображений в одно изображение без видимых границ.

· Для вставки патчей в изображения, чтобы скрыть дефекты или нежелательные изображения без очевидной границы.

Сохранение альфа-канала как отдельного изображения

В любой момент мы можем сохранить отдельные каналы изображения RGB или RGBa как разные изображения в градациях серого. Для этого мы используем команду Edit — Save Mask / Channel с сохраняемым каналом, указанным в диалоговом окне Save. Например, мы можем сохранить градации альфа-канала как изображение в градациях серого, выбрав «Канал: альфа» в диалоговом окне «Сохранить».Это очень полезный способ сохранения различных шаблонов прозрачности. Мы можем пробовать разные степени альфа-прозрачности по своему усмотрению и всегда возвращаться к одному шаблону, который нам нравится больше всего.

См. Раздел «Маски» и раздел «Разделение изображений по каналам» для получения информации о том, как можно использовать «Редактировать — Сохранить маску / канал» для разделения изображения на разные изображения для каждого канала.

невидимых пикселей по сравнению с прозрачностью пикселей RGBa

Альфа-прозрачность — это другой механизм, чем невидимые пиксели.Ключевые отличия включают:

· Невидимые пиксели — это эффект «все или ничего»: либо пиксель полностью виден, либо невидим. Альфа-прозрачность позволяет устанавливать разные настройки прозрачности для каждого отдельного пикселя.

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

· Использование невидимых пикселей не увеличивает размер изображения. Альфа-прозрачность работает только с изображениями RGBa и требует четвертого канала для каждого пикселя, независимо от того, используется ли прозрачность или нет.

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

Рекомендации по производительности

Работа с изображениями RGBa немного медленнее, чем работа с обычными изображениями RGB, по двум причинам:

· Изображения RGBa больше изображений RGB.

· Настройка прозрачности для каждого отдельного пикселя RGBa занимает больше времени, чем просто отображение пикселя RGB.

Большинство графических редакторов изображений выполняется с помощью изображений, которые в десятки или сотни раз меньше, чем изображения, которые могут быть в ГИС-приложениях. По этой причине использование RGBa и альфа-прозрачности обычно не является проблемой производительности при редактировании графических изображений в таких приложениях, как Adobe PhotoShop.

Поскольку изображения ГИС, такие как изображения с растровыми данными, могут иметь размер более ста мегабайт, нам необходимо рассмотреть в среде ГИС, стоит ли конвертировать изображения в RGBa и использовать альфа-прозрачность.При работе с такими большими изображениями на настольных компьютерах следует учитывать все проблемы с производительностью.

Номенклатура

Прозрачность и непрозрачность — это два термина, которые означают одно и то же понятие, рассматриваемое с разных сторон. Когда что-то полностью непрозрачно, оно совсем не прозрачное. Когда что-то совершенно прозрачно, можно сказать, что непрозрачность равна нулю.

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

Согласно соглашению в индустрии программного обеспечения для редактирования графики, прозрачность слоя настраивается с помощью элементов управления, которые устанавливают непрозрачность от 0% до 100%, чтобы изображение со 100% было полностью непрозрачным и не позволяло видеть изображение под ним. .Manifold следует этому соглашению. Это соглашение сохраняется в индустрии графики, даже несмотря на то, что техническая реализация эффектов прозрачности выполняется с использованием альфа-канала в изображениях RGBa, где чем выше значение альфа-канала (от 0 до 255), тем выше прозрачность.

Таким образом, возникает небольшой концептуальный диссонанс увеличения непрозрачности с более высокими числами (до 100%) в диалогах и других пользовательских интерфейсах, в то время как внутренние наборы данных используют числа (значения альфа-канала), в которых непрозрачность уменьшается с увеличением числа.Поскольку мы редко устанавливаем альфа-значения вручную, это не так уж и плохо. Альфа-значения обычно устанавливаются с помощью различных инструментов, таких как ластики или маски. В случае масок, чем темнее область маски, тем ниже значение альфа и, следовательно, выше непрозрачность. С случайной концептуальной точки зрения это очень приемлемо, поскольку приводит к эффекту, когда черные области масок вызывают полную непрозрачность, а белые области масок вызывают полную прозрачность. Поскольку мы привыкли думать о «пустом пространстве» как о прозрачном, это хорошо работает как естественная мнемоника для эффектов масок.

См. Также

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

Перечисление цветов и функции ColorFade, ColorValue и RGBA в Power Apps — Power Apps

Color.AliceBlue ColorValue («# f0f8ff»)
ColorValue («aliceblue») 		RGBA (240, 248, 255, 1)
Цвет.Античный Белый ColorValue («# faebd7»)
ColorValue («AntiqueWhite») 		RGBA (250, 235, 215, 1)
Цвет Аква ColorValue («# 00ffff»)
ColorValue («AQUA») 		RGBA (0, 255, 255, 1)
Цвет Аквамарин ColorValue («# 7fffd4»)
ColorValue («Аквамарин») 		RGBA (127, 255, 212, 1)
Цвет.Лазурный ColorValue («# f0ffff»)
ColorValue («лазурный») 		RGBA (240, 255, 255, 1)
Цвет бежевый ColorValue («# f5f5dc»)
ColorValue («Бежевый») 		RGBA (245, 245, 220, 1)
Цветной диск ColorValue («# ffe4c4»)
ColorValue («BISQUE») 		RGBA (255, 228, 196, 1)
Цвет.Черный ColorValue («# 000000»)
ColorValue («Черный») 		RGBA (0, 0, 0, 1)
Цвет: миндаль ColorValue («#ffebcd»)
ColorValue («blanchedalmond») 		RGBA (255, 235, 205, 1)
Цвет Синий ColorValue («# 0000ff»)
ColorValue («Синий») 		RGBA (0, 0, 255, 1)
Цвет.Синий Фиолетовый ColorValue («# 8a2be2»)
ColorValue («BLUEVIOLET») 		RGBA (138, 43, 226, 1)
Цвет Коричневый ColorValue («# a52a2a»)
ColorValue («Коричневый») 		RGBA (165, 42, 42, 1)
Цвет.Бурливуд ColorValue («# deb887»)
ColorValue («Burlywood») 		RGBA (222, 184, 135, 1)
Цвет.CadetBlue ColorValue («# 5f9ea0»)
ColorValue («CadetBlue») 		RGBA (95, 158, 160, 1)
Color.Chartreuse ColorValue («# 7fff00»)
ColorValue («CHARTREUSE») 		RGBA (127, 255, 0, 1)
Цвет. Шоколад ColorValue («# d2691e»)
ColorValue («Шоколад») 		RGBA (210, 105, 30, 1)
Цвет.Коралл ColorValue («# ff7f50»)
ColorValue («коралл») 		RGBA (255, 127, 80, 1)
Цвет Василек Синий ColorValue («# 6495ed»)
ColorValue («CornflowerBlue») 		RGBA (100, 149, 237, 1)
Color.Cornsilk ColorValue («# fff8dc»)
ColorValue («CORNSILK») 		RGBA (255, 248, 220, 1)
Цвет.Малиновый ColorValue («# dc143c»)
ColorValue («Малиновый») 		RGBA (220, 20, 60, 1)
Color.Cyan ColorValue («# 00ffff»)
ColorValue («голубой») 		RGBA (0, 255, 255, 1)
Цвет Темно-синий ColorValue («# 00008b»)
ColorValue («DarkBlue») 		RGBA (0, 0, 139, 1)
Цвет.Темный Циан ColorValue («# 008b8b»)
ColorValue («DARKCYAN») 		RGBA (0, 139, 139, 1)
Цвет. Темно-золотой стержень ColorValue («# b8860b»)
ColorValue («DarkGoldenRod») 		RGBA (184, 134, 11, 1)
Цвет Темно-серый ColorValue («# a9a9a9»)
ColorValue («темно-серый») 		RGBA (169, 169, 169, 1)
Цвет.Темно-зеленый ColorValue («# 006400»)
ColorValue («DarkGreen») 		RGBA (0, 100, 0, 1)
Цвет Темно-серый ColorValue («# a9a9a9»)
ColorValue («DARKGREY») 		RGBA (169, 169, 169, 1)
Цвет: Темно-хаки ColorValue («# bdb76b»)
ColorValue («DarkKhaki») 		RGBA (189, 183, 107, 1)
Цвет.Темно-пурпурный ColorValue («# 8b008b»)
ColorValue («darkmagenta») 		RGBA (139, 0, 139, 1)
Цвет DarkOliveGreen ColorValue («# 556b2f»)
ColorValue («DarkOliveGreen») 		RGBA (85, 107, 47, 1)
Цвет Темно-оранжевый ColorValue («# ff8c00»)
ColorValue («DARKORANGE») 		RGBA (255, 140, 0, 1)
Цвет.Темная Орхидея ColorValue («# 9932cc»)
ColorValue («DarkOrchid») 		RGBA (153, 50, 204, 1)
Цвет. Темно-красный ColorValue («# 8b0000»)
ColorValue («darkred») 		RGBA (139, 0, 0, 1)
Цвет. Темно-лососевый ColorValue («# e9967a»)
ColorValue («DarkSalmon») 		RGBA (233, 150, 122, 1)
Цвет.Темно-зеленый ColorValue («# 8fbc8f»)
ColorValue («DARKSEAGREEN») 		RGBA (143, 188, 143, 1)
Цвет. Темно-синий ColorValue («# 483d8b»)
ColorValue («DarkSlateBlue») 		RGBA (72, 61, 139, 1)
Цвет Темно-серый ColorValue («# 2f4f4f»)
ColorValue («darkslategray») 		RGBA (47, 79, 79, 1)
Цвет.Темно-серый ColorValue («# 2f4f4f»)
ColorValue («DarkSlateGrey») 		RGBA (47, 79, 79, 1)
Цвет Темно-бирюзовый ColorValue («# 00ced1»)
ColorValue («DARKTURQUOISE») 		RGBA (0, 206, 209, 1)
Цвет Темно-фиолетовый ColorValue («# 9400d3»)
ColorValue («DarkViolet») 		RGBA (148, 0, 211, 1)
Цвет.DeepPink ColorValue («# ff1493»)
ColorValue («deeppink») 		RGBA (255, 20, 147, 1)
Цвет. DeepSkyBlue ColorValue («# 00bfff»)
ColorValue («DeepSkyBlue») 		RGBA (0, 191, 255, 1)
Цвет.DimGray ColorValue («# 696969»)
ColorValue («DIMGRAY») 		RGBA (105, 105, 105, 1)
Цвет.DimGrey ColorValue («# 696969»)
ColorValue («DimGrey») 		RGBA (105, 105, 105, 1)
Цвет DodgerBlue ColorValue («# 1e90ff»)
ColorValue («dodgerblue») 		RGBA (30, 144, 255, 1)
Color.FireBrick ColorValue («# b22222»)
ColorValue («FireBrick») 		RGBA (178, 34, 34, 1)
Цвет.Цветочный Белый ColorValue («# fffaf0»)
ColorValue («FLORALWHITE») 		RGBA (255, 250, 240, 1)
Цвет.Зеленый лес ColorValue («# 228b22»)
ColorValue («ForestGreen») 		RGBA (34, 139, 34, 1)
Цвет. Фуксия ColorValue («# ff00ff»)
ColorValue («фуксия») 		RGBA (255, 0, 255, 1)
Цвет.Гейнсборо ColorValue («#dcdcdc»)
ColorValue («Gainsboro») 		RGBA (220, 220, 220, 1)
Цвет.GhostWhite ColorValue («# f8f8ff»)
ColorValue («GHOSTWHITE») 		RGBA (248, 248, 255, 1)
Цвет. Золото ColorValue («# ffd700»)
ColorValue («Gold») 		RGBA (255, 215, 0, 1)
Цвет.GoldenRod ColorValue («# daa520»)
ColorValue («Goldenrod») 		RGBA (218, 165, 32, 1)
Цвет. Серый ColorValue («# 808080»)
ColorValue («Серый») 		RGBA (128, 128, 128, 1)
Цвет.Зеленый ColorValue («# 008000»)
ColorValue («GREEN») 		RGBA (0, 128, 0, 1)
Цвет.Зеленый желтый ColorValue («# adff2f»)
ColorValue («GreenYellow») 		RGBA (173, 255, 47, 1)
Цвет. Серый ColorValue («# 808080»)
ColorValue («серый») 		RGBA (128, 128, 128, 1)
Цвет. Медовая роса ColorValue («# f0fff0»)
ColorValue («Honeydew») 		RGBA (240, 255, 240, 1)
Цвет.HotPink ColorValue («# ff69b4»)
ColorValue («HOTPINK») 		RGBA (255, 105, 180, 1)
Цвет. Индийский красный ColorValue («# cd5c5c»)
ColorValue («IndianRed») 		RGBA (205, 92, 92, 1)
Цвет. Индиго ColorValue («# 4b0082»)
ColorValue («Индиго») 		RGBA (75, 0, 130, 1)
Цвет.Слоновая кость ColorValue («# fffff0»)
ColorValue («Цвет слоновой кости») 		RGBA (255, 255, 240, 1)
Цвет.Хаки ColorValue («# f0e68c»)
ColorValue («KHAKI») 		RGBA (240, 230, 140, 1)
Цвет лаванды ColorValue («# e6e6fa»)
ColorValue («Лаванда») 		RGBA (230, 230, 250, 1)
Цвет.Бледно-лиловый ColorValue («# fff0f5»)
ColorValue («Lavenderblush») 		RGBA (255, 240, 245, 1)
Цвет.Зеленый ColorValue («# 7cfc00»)
ColorValue («LawnGreen») 		RGBA (124, 252, 0, 1)
Цвет Лимонный шифон ColorValue («#fffacd»)
ColorValue («LEMONCHIFFON») 		RGBA (255, 250, 205, 1)
Цвет.Светло-голубой ColorValue («# add8e6»)
ColorValue («LightBlue») 		RGBA (173, 216, 230, 1)
Color.LightCoral ColorValue («# f08080»)
ColorValue («lightcoral») 		RGBA (240, 128, 128, 1)
Color.LightCyan ColorValue («# e0ffff»)
ColorValue («LightCyan») 		RGBA (224, 255, 255, 1)
Цвет.Светло-золотой стержень желтый ColorValue («# fafad2»)
ColorValue («lightgoldenrodyellow») 		RGBA (250, 250, 210, 1)
Цвет.Светло-серый ColorValue («# d3d3d3»)
ColorValue («LightGray») 		RGBA (211, 211, 211, 1)
Цвет.Светло-зеленый ColorValue («# 90ee90»)
ColorValue («светло-зеленый») 		RGBA (144, 238, 144, 1)
Цвет.Светло-серый ColorValue («# d3d3d3»)
ColorValue («LightGrey») 		RGBA (211, 211, 211, 1)
Цвет. Светло-розовый ColorValue («# ffb6c1»)
ColorValue («LIGHTPINK») 		RGBA (255, 182, 193, 1)
Цвет.Светло-лососевый ColorValue («# ffa07a»)
ColorValue («LightSalmon») 		RGBA (255, 160, 122, 1)
Цвет.Светлое Морезеленое ColorValue («# 20b2aa»)
ColorValue («lightseagreen») 		RGBA (32, 178, 170, 1)
Color.LightSkyBlue ColorValue («# 87cefa»)
ColorValue («LightSkyBlue») 		RGBA (135, 206, 250, 1)
Цвет.LightSlateGray ColorValue («# 778899»)
ColorValue («LIGHTSLATEGRAY») 		RGBA (119, 136, 153, 1)
Цвет.LightSlateGrey ColorValue («# 778899»)
ColorValue («LightSlateGrey») 		RGBA (119, 136, 153, 1)
Color.LightSteelBlue ColorValue («# b0c4de»)
ColorValue («Lightsteelblue») 		RGBA (176, 196, 222, 1)
Цвет.Светло-желтый ColorValue («# ffffe0»)
ColorValue («LightYellow») 		RGBA (255, 255, 224, 1)
Цвет.Лайм ColorValue («# 00ff00»)
ColorValue («LIME») 		RGBA (0, 255, 0, 1)
Цвет.изеленый ColorValue («# 32cd32»)
ColorValue («LimeGreen») 		RGBA (50, 205, 50, 1)
Цветное белье ColorValue («# faf0e6»)
ColorValue («белье») 		RGBA (250, 240, 230, 1)
Цвет.Пурпурный ColorValue («# ff00ff»)
ColorValue («Пурпурный») 		RGBA (255, 0, 255, 1)
Бордовый ColorValue («# 800000»)
ColorValue («MAROON») 		RGBA (128, 0, 0, 1)
Цвет Средний Аквамарин ColorValue («# 66cdaa»)
ColorValue («Средний аквамарин») 		RGBA (102, 205, 170, 1)
Цвет.Средний синий ColorValue («# 0000cd»)
ColorValue («mediumblue») 		RGBA (0, 0, 205, 1)
Цвет.Средний Орхидея ColorValue («# ba55d3»)
ColorValue («MediumOrchid») 		RGBA (186, 85, 211, 1)
Цвет.Средний фиолетовый ColorValue («# 9370db»)
ColorValue («MEDIUMPURPLE») 		RGBA (147, 112, 219, 1)
Цвет.Средний SeaGreen ColorValue («# 3cb371»)
ColorValue («MediumSeaGreen») 		RGBA (60, 179, 113, 1)
Цвет.Средний пластинчатый синий ColorValue («# 7b68ee»)
ColorValue («mediumslateblue») 		RGBA (123, 104, 238, 1)
Цвет.Средний ВеснаЗеленый ColorValue («# 00fa9a»)
ColorValue («MediumSpringGreen») 		RGBA (0, 250, 154, 1)
Цвет.Средний бирюзовый ColorValue («# 48d1cc»)
ColorValue («MEDIUMTURQUOISE») 		RGBA (72, 209, 204, 1)
Цвет.Средний Фиолетовый Красный ColorValue («# c71585»)
ColorValue («MediumVioletRed») 		RGBA (199, 21, 133, 1)
Цвет.Синий полуночный ColorValue («# 1«)
ColorValue («midnightblue») 		RGBA (25, 25, 112, 1)
Цвет.MintCream ColorValue («# f5fffa»)
ColorValue («MintCream») 		RGBA (245, 255, 250, 1)
Цвет MistyRose ColorValue («# ffe4e1»)
ColorValue («MISTYROSE») 		RGBA (255, 228, 225, 1)
Цвет.Мокасины ColorValue («# ffe4b5»)
ColorValue («Мокасины») 		RGBA (255, 228, 181, 1)
Цвет.Навахо Белый ColorValue («#ffdead»)
ColorValue («navajowhite») 		RGBA (255, 222, 173, 1)
Цвет. Темно-синий ColorValue («# 000080»)
ColorValue («Navy») 		RGBA (0, 0, 128, 1)
Color.OldLace ColorValue («# fdf5e6»)
ColorValue («OLDLACE») 		RGBA (253, 245, 230, 1)
Цвет.Оливковое ColorValue («# 808000»)
ColorValue («Olive») 		RGBA (128, 128, 0, 1)
Color.OliveDrab ColorValue («# 6b8e23»)
ColorValue («Olivedrab») 		RGBA (107, 142, 35, 1)
Цвет.Оранжевый ColorValue («# ffa500»)
ColorValue («Orange») 		RGBA (255, 165, 0, 1)
Цвет.Оранжевый Красный ColorValue («# ff4500»)
ColorValue («ORANGERED») 		RGBA (255, 69, 0, 1)
Цвет Орхидея ColorValue («# da70d6»)
ColorValue («Орхидея») 		RGBA (218, 112, 214, 1)
Цвет.бледно-золотой стержень ColorValue («# eee8aa»)
ColorValue («palegoldenrod») 		RGBA (238, 232, 170, 1)
Цвет.Бледно-зеленый ColorValue («# 98fb98»)
ColorValue («PaleGreen») 		RGBA (152, 251, 152, 1)
Цвет.Бледно-бирюзовый ColorValue («#afeeee»)
ColorValue («PALETURQUOISE») 		RGBA (175, 238, 238, 1)
Цвет.бледно-фиолетовыйКрасный ColorValue («# db7093»)
ColorValue («PaleVioletRed») 		RGBA (219, 112, 147, 1)
Цвет.Папайя Кнут ColorValue («# ffefd5»)
ColorValue («papayawhip») 		RGBA (255, 239, 213, 1)
Color.PeachPuff ColorValue («# ffdab9»)
ColorValue («PeachPuff») 		RGBA (255, 218, 185, 1)
Color.Peru ColorValue («# cd853f»)
ColorValue («PERU») 		RGBA (205, 133, 63, 1)
Цвет.Розовый ColorValue («# ffc0cb»)
ColorValue («Розовый») 		RGBA (255, 192, 203, 1)
Цвет. Слива ColorValue («# dda0dd»)
ColorValue («сливовый») 		RGBA (221, 160, 221, 1)
Цвет. Синий порошок ColorValue («# b0e0e6»)
ColorValue («PowderBlue») 		RGBA (176, 224, 230, 1)
Цвет.Фиолетовый ColorValue («# 800080»)
ColorValue («PURPLE») 		RGBA (128, 0, 128, 1)
Цвет. Красный ColorValue («# ff0000»)
ColorValue («Красный») 		RGBA (255, 0, 0, 1)
Цвет.Розово-коричневый ColorValue («# bc8f8f»)
ColorValue («розово-коричневый») 		RGBA (188, 143, 143, 1)
Цвет.RoyalBlue ColorValue («# 4169e1»)
ColorValue («RoyalBlue») 		RGBA (65, 105, 225, 1)
Цвет. Седло-коричневый ColorValue («# 8b4513»)
ColorValue («SADDLEBROWN») 		RGBA (139, 69, 19, 1)
лосось ColorValue («# fa8072»)
ColorValue («Лосось») 		RGBA (250, 128, 114, 1)
Цвет.SandyBrown ColorValue («# f4a460»)
ColorValue («Sandybrown») 		RGBA (244, 164, 96, 1)
Цвет.Зеленый ColorValue («# 2e8b57»)
ColorValue («SeaGreen») 		RGBA (46, 139, 87, 1)
Color.SeaShell ColorValue («# fff5ee»)
ColorValue («SEASHELL») 		RGBA (255, 245, 238, 1)
Цвет.Сиенна ColorValue («# a0522d»)
ColorValue («Сиенна») 		RGBA (160, 82, 45, 1)
Серебристый ColorValue («# c0c0c0»)
ColorValue («silver») 		RGBA (192, 192, 192, 1)
Color.SkyBlue ColorValue («# 87ceeb»)
ColorValue («SkyBlue») 		RGBA (135, 206, 235, 1)
Цвет.Сланцевый синий ColorValue («# 6a5acd»)
ColorValue («SLATEBLUE») 		RGBA (106, 90, 205, 1)
Цвет.SlateGray ColorValue («# 708090»)
ColorValue («SlateGray») 		RGBA (112, 128, 144, 1)
Цвет Серый Гриф ColorValue («# 708090»)
ColorValue («slategrey») 		RGBA (112, 128, 144, 1)
Цвет.Снег ColorValue («#fffafa»)
ColorValue («Снег») 		RGBA (255, 250, 250, 1)
Цвет. Весенний зеленый ColorValue («# 00ff7f»)
ColorValue («SPRINGGREEN») 		RGBA (0, 255, 127, 1)
Цвет.Синий ColorValue («# 4682b4»)
ColorValue («SteelBlue») 		RGBA (70, 130, 180, 1)
Цвет.Желто-коричневый ColorValue («# d2b48c»)
ColorValue («tan») 		RGBA (210, 180, 140, 1)
Color.Teal ColorValue («# 008080»)
ColorValue («Бирюзовый») 		RGBA (0, 128, 128, 1)
Цвет Чертополох ColorValue («# d8bfd8»)
ColorValue («THISTLE») 		RGBA (216, 191, 216, 1)
Цвет.Помидор ColorValue («# ff6347»)
ColorValue («Помидор») 		RGBA (255, 99, 71, 1)
Цвет. Прозрачный ColorValue («# 00000000»)
ColorValue («Transparent») 		RGBA (0, 0, 0, 0)
Бирюзовый ColorValue («# 40e0d0»)
ColorValue («бирюзовый») 		RGBA (64, 224, 208, 1)
Цвет.Фиолетовый ColorValue («# ee82ee»)
ColorValue («Violet») 		RGBA (238, 130, 238, 1)
Цвет. Пшеница ColorValue («# f5deb3»)
ColorValue («ПШЕНИЦА») 		RGBA (245, 222, 179, 1)
Цвет. Белый ColorValue («#ffffff»)
ColorValue («Белый») 		RGBA (255, 255, 255, 1)
Цвет.Белый дым ColorValue («# f5f5f5»)
ColorValue («белый дым») 		RGBA (245, 245, 245, 1)
Цвет желтый ColorValue («# ffff00»)
ColorValue («Желтый») 		RGBA (255, 255, 0, 1)
Цвет.Желто-зеленый ColorValue («# 9acd32»)
ColorValue («ЖЕЛТО-ЗЕЛЕНЫЙ») 		RGBA (154, 205, 50, 1)

Как использовать цвета шестнадцатеричного кода CSS с альфа-значениями

Введение

В CSS можно использовать несколько форматов цветов.Общие включают шестнадцатеричные (шестнадцатеричные) коды, RGB (красный, зеленый, синий), RGBA (красный, зеленый, синий, альфа) и HSL (оттенок, насыщенность, яркость).

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

Предварительные требования

Если вы хотите продолжить эту статью, вам потребуется:

  • Требуется некоторое знакомство с CSS. Вы можете воспользоваться серией руководств «Как создать веб-сайт с помощью CSS», если вам нужно освежить свои знания.
  • Современный веб-браузер, поддерживающий шестнадцатеричное обозначение цвета #rrggbbaa .

Использование ключевых слов цвета

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

В CSS около 140 названных цветов (например, красный , синий , лавандовый и т. Д.).

Например, если вы хотите, чтобы ваш текст имел красный цвет, вы можете использовать ключевое слово red :

  div {
 красный цвет;
}

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

Что такое шестнадцатеричные значения

Вы, вероятно, больше всего привыкли считать с десятичными значениями (или основанием 10):

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Другими словами, однозначное число имеет только 10 возможных значений (от 0 до 9 ), а после этого оно должно увеличиться до двух цифр ( 10 ).

Шестнадцатеричное значений — 16 по основанию вместо 10:

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Он использует буквы A , B , C , D , E и F для представления дополнительных значений.

Например, это все допустимые шестнадцатеричные значения:

  00, 01, 99, 9D, 1D, CC, E4, F5

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

Использование шестнадцатеричных значений в CSS

При стилизации элемента с помощью CSS вы часто будете изменять значения цвета для таких свойств, как font color , background-color , border-color и т. Д.

Для создания собственных цветов вы можете использовать комбинации шестнадцатеричных чисел, описанных выше, для создания шестнадцатеричных кодов, которые представляют определенные цвета.

Шестнадцатеричные коды CSS

должны начинаться с «знака числа» (#) (также известного как знак фунта или решетка). Затем шесть цифр шестнадцатеричного значения. Каждая пара из двух цифр представляет красный, зеленый и синий цвета. Шаблон выглядит как #RRGGBB (где красный — R , зеленый — G , а синий — B ).

Цвета представлены комбинацией красного, зеленого и синего цветов. Наименьшее значение ( 00 ) будет самой темной версией цвета (ближайшей к черному), а максимальное значение ( FF ) будет самой светлой версией цвета (ближайшей к белому).

Установка для всех трех пар наименьшее значение ( 00 ) приведет к сплошному черному цвету:

  div {
  цвет: # 000000;
}

Установка максимального значения для всех трех пар ( FF ) приведет к сплошному белому цвету:

  div {
  цвет: #FFFFFF;
}

Допустим, вы хотите, чтобы текст заголовка был ярко-красным цветом. Для этого вы можете установить для красного цвета ( RR ) максимально возможное значение ( FF ).Поскольку вам не нужны ни зеленый, ни синий, вы можете установить для каждого из зеленого ( GG ) и синего ( BB ) наименьшего возможного значения ( 00 ).

  div {
  цвет: # FF0000;
}

Этот код будет отображаться как

Красный текст

Изменяя количество красного, синего и зеленого, вы можете создавать самые разные цвета. # DC143C имеет большое количество красного ( DC ) — это даст «малиновый» цвет. # EE82EE имеет большое количество красного ( EE ) и синего ( EE ) — это дает «фиолетовый» цвет. # 40E0D0 имеет большое количество зеленого ( E0 ) и синего ( D0 ) — это дает «бирюзовый» цвет.

Примечание. Шестнадцатеричные коды CSS не чувствительны к регистру. Это означает, что буквенные символы могут быть в верхнем или нижнем регистре — # ff0000 эквивалентно # FF0000 . CSS также поддерживает сокращенные значения. Это означает, что # F00 эквивалентно # FF0000 .

Используемый вами подход должен соответствовать стандартам кодирования, используемым в вашем проекте.

Затем узнайте, как использовать альфа-значения с шестнадцатеричными кодами CSS.

Добавление альфа-значения в шестнадцатеричные коды CSS

Использование значения альфа для обновления прозрачности цвета изменит формат шестнадцатеричного кода с #RRGGBB на #RRGGBBAA (где альфа — A ). Первые шесть значений (красный, зеленый и синий) остаются прежними.

Значение AA в #RRGGBBAA может варьироваться от наименьшего возможного значения ( 00 ) до максимально возможного ( FF ).Уменьшение значения приведет к тому, что видимость будет становиться все слабее и слабее, пока она не станет прозрачной. Увеличение значения приведет к тому, что видимость станет все более непрозрачной.

Допустим, вам нужен достаточно прозрачный синий цвет.

Сначала начните с шестнадцатеричного кода синего цвета:

  div {
  цвет фона: # 0080FF;
}

Этот код будет отображаться как

Цвет фона # 0080FF

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

.
  div {
  цвет фона: # 0080FF80;
}

Этот код будет отображаться как

Цвет фона # 0080FF80

Значение альфа в шестнадцатеричном формате может немного сбивать с толку, потому что трудно представить себе, как на самом деле будет выглядеть значение прозрачности по основанию 16. Однако преимущество в том, что если вы уже используете шестнадцатеричные коды в своей кодовой базе, теперь вы можете обновить их, чтобы изменить прозрачность! Изменения цветового формата не требуется.

Один быстрый совет по просмотру цветов в разных форматах — с помощью Chrome DevTools.

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

В этом примере настраиваются значение альфа-канала и значение цвета.Затем переключается между форматом шестнадцатеричного кода, форматом RGBA и форматом HSLA.

Подробнее о палитре цветов Chrome DevTools.

Заключение

В этой статье вы рассмотрели шестнадцатеричные цветовые коды и исследовали использование альфа-значений для прозрачности.

Для поддержки шестнадцатеричных кодов #RRGGBBAA браузером требуются современные браузеры. Он недоступен в старых версиях Internet Explorer. Ссылка Могу ли я использовать шестнадцатеричное обозначение цвета #rrggbbaa , чтобы узнать, подходит ли этот формат для целевой аудитории вашего проекта.

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

RGB против цветов RGBa в CSS (что, почему, как) — Techstacker

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

RGB и RGBa — две цветовые модели, используемые в CSS в качестве альтернативы использованию значений цвета шестнадцатеричного кода (например, # 282828 ).

В чем разница между RGB и RGBa?

  • RGB означает красный, зеленый и синий
  • RGBa означает красный, зеленый, синий и Alpha

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

Если вы запутались, не волнуйтесь, через минуту все станет понятно.

Для использования RGB и RGBa в CSS предусмотрены две цветовые функции: rgb () и rgba () .

Обе функции используются для добавления цветов фона в диапазоне от 0 до 255 на шкале красного, зеленого и синего цветов.

Однако rgb () используется только для добавления сплошных цветов фона:

  {
    
    цвет фона: rgb (0, 255, 0);
}

Между тем, RGBa намного более гибок, чем RGB, потому что он также позволяет добавлять прозрачность через альфа-канал:

  {
    
    цвет фона: rgb (0, 255, 0, 0,5);
}

Почему полезно добавлять прозрачность к цветам фона?

Например, предположим, вы хотите создать привлекающую внимание карту пользовательского интерфейса для своего веб-сайта, например:

Пейзажная фотография из моей последней поездки в Северное море

На пользовательской карте выше:

  • Уменьшенное изображение
  • Накладка
  • Какой-то текст сверху.

Я использовал функцию rgba () , чтобы использовать альфа-канал для управления тем, насколько видимым должно быть фоновое изображение по сравнению с текстом. Я выбрал 50% прозрачность черного для оверлея UI Card:

  .card-overlay {
    цвет фона: rgba (0, 0, 0, 0,5);
}

Почему я использовал 50% прозрачность?

С таким же успехом могло быть 40% или 60%. Я также мог бы использовать linear-gradient с двумя разными уровнями прозрачности.Это зависит от того, какой образ вы хотите.

Высокая и низкая прозрачность альфа-канала:

  • Чем ниже значение альфа-канала (например, 0,1 ), тем больше прозрачность и тем заметнее фоновое изображение.
  • Чем выше значение альфа-канала (например, 0,9 ), тем меньше прозрачность и меньше видимость фонового изображения.

Как видно из сравнения ниже, значение альфа-канала влияет на читаемость и настроение презентации:

Альфа-каналы от 0.1, 0,5 и 0,8

Нельзя делать наложение слишком светлым или слишком темным.

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

Пример кода

Ниже приведены все HTML и CSS из примера UI Card.

HTML 

  

      
 

      
      

         
 Северное Датское море 
 
        

          Исследуйте красивое и динамичное Северное море Дании - где каждый день
          это новый опыт.
CSS 
  .card {
    положение: относительное;
    высота: 400 пикселей;
    ширина: 400 пикселей;
}

.card-thumbnail {
    высота: 100%;
    ширина: 100%;
    дисплей: блок;
    объект подходит: крышка;
}

.card-text {
    цвет белый;
    позиция: абсолютная;
    ширина: 80%;
    максимальная ширина: 300 пикселей;
    верх: 70%;
    осталось: 50%;
    преобразовать: перевести (-50%, -50%);
    z-индекс: 1;
}

.card-title {
    размер шрифта: 1,45 бэр;
}
.card-description {
    размер шрифта: 1.15рем;
    верхняя маржа: 0,5 бэр;
    высота строки: 1,4;
}

.card-overlay {
    ширина: 100%;
    высота: 100%;
    позиция: абсолютная;
    верх: 0;
    слева: 0;
    цвет фона: rgba (0, 0, 0, 0,5);
    z-индекс: 1;
}

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

Включение прозрачности RGBA в Ubuntu (Karmic, Lucid, Maverick) ~ Web Upd8: блог Ubuntu / Linux


Как вы, наверное, знаете, прозрачность RGBA планировалось выпустить с Ubuntu 10.04 LTS Lucid Lynx, но в конечном итоге этого не произошло из-за некоторых проблем, таких как сбой различных приложений и т. Д. Прозрачность RGBA была подтверждена для включения в Ubuntu 10.10 Maverick Meerkat Марком Шаттлвортом из UDS-M, но если вы не можете ждать, вы можете попробовать ее с помощью PPA Ubuntu.

Так зачем использовать прозрачность RGBA, а не прозрачность, которая есть в Compiz? Ну, потому что RGBA не делает все прозрачным, как это делает Compiz, но некоторые элементы, такие как шрифт и элементы управления / кнопки, все еще хорошо видны.

Вы могли установить поддержку RGBA из PPA начиная с Ubuntu Karmic, но тогда с этим было много проблем. Я протестировал последнюю версию RGBA из PPA, и я не заметил никаких сбоев (примечания: с пакетом по умолчанию из PPA — никаких дополнительных настроек; протестировано на видеокарте Nvidia, я не могу сказать, как он будет работать на других видеокарты) с Totem, Firefox и т. д., приложения, которые раньше вылетали при включении RGBA (но RGBA для них не работает). Это означает, что поддержка RGBA стала более стабильной или исходный код был лучше упакован, но перед добавлением PPA помните, что ошибки все еще могут быть, поэтому используйте его на свой страх и риск! Я приложу полные инструкции по удалению на всякий случай.


Известные проблемы:

  • Я обнаружил только одну неприятную вещь: панель прозрачна лишь частично из-за ошибок в некоторых апплетах (я предполагаю, не знаю почему).
  • Только приложения GTK + поддерживают прозрачность RGBA. Это означает, что Firefox, Thunderbird, Songbird, OpenOffice или Chrome не будут иметь прозрачности. То же самое и с GlobalMenu. Skype или Google Планета Земля используют Qt, поэтому и для них это не сработает. Inkscape, Gnome Shell и Totem были занесены в черный список из-за ошибок, поэтому они не поддерживают RGBA.Это не означает, что RGBA не будет работать глобально, это просто означает, что эти приложения не будут прозрачными.

Как получить поддержку прозрачности RGBA в Ubuntu 9.10 Karmic Koala, Ubuntu 10.04 Lucid Lynx или Ubuntu 10.10 Maverick Meerkat

Примечания:
— чтобы использовать прозрачность RGBA, вам необходимо включить проприетарные графические драйверы в разделе Система> Администрирование> Драйверы оборудования!
— вы должны установить эффекты Compiz как минимум в нормальное состояние. Для этого щелкните правой кнопкой мыши на рабочем столе, выберите «Изменить фон рабочего стола» и на вкладке «Визуальные эффекты» выберите «Обычный» или «Дополнительно».

1. Добавьте PPA:

  sudo add-apt-repository ppa: erik-b-andersen / rgba-gtk

2. Обновите

  sudo apt-get update && sudo apt-get upgrade

Вам необходимо запустить обновление (выполните команду выше) — это обновит Murrine Engine. Если у вас есть Nautilus по умолчанию, он также будет обновлен, чтобы исправить ошибку, приводящую к сбою Nautilus. Если вы используете Nautilus Elementary, вы не получите обновления для Nautilus, но не волнуйтесь, Nautilus Elementary уже имеет поддержку RGBA по умолчанию.

3. Установите другие необходимые пакеты 

  sudo apt-get install gnome-color-chooser gtk2-module-rgba
4. Необязательно: также установите дополнительные темы Murrine (RGBA будет работать только для тем Murrine — это включает в себя новые световые темы в Ubuntu: Ambiance и Radiance, но, возможно, вы захотите попробовать еще несколько тем):
  sudo apt-get install murrine-themes

5. Используйте Gnome Color Chooser, чтобы включить глобальную прозрачность RGBA

Перейдите в System> Preferences> Gnome Color Chooser и на вкладке «Engine» установите флажок «Global», а затем выберите «Murrine» из раскрывающегося списка:


Затем нажмите кнопку «Preferences» рядом с ним и прокрутите вниз до «Конфигурация включения / выключения поддержки RGBA» и установите оба флажка рядом с «Включить / отключить поддержку RGBA»:



Теперь нажмите «ОК», затем нажмите «Применить», а затем «Закрыть».6. Используйте тему Murrine

Если вы используете темы Ambiance или Radiance, вы можете пропустить этот шаг. Однако вы можете использовать другую тему, если хотите. Итак, чтобы использовать другую тему Murrine, которую вы установили на шаге 4 (который был необязательным), щелкните правой кнопкой мыши на рабочем столе, выберите «Изменить фон рабочего стола», затем на вкладке «Темы» выберите «Настроить». Наконец, на вкладке «Controls» выберите тему Murrine:


7. Теперь выйдите из системы и снова войдите в систему (обязательно!)

8. Необязательно: на этом этапе окна и меню приложения должны быть прозрачными.Однако вы можете получить гораздо лучший эффект и удобство использования, используя размытие по Гауссу с Compiz:

Чтобы использовать размытие по Гауссу, установите дополнительные плагины Compiz и CCSM (если у вас его еще нет): 

  sudo apt-get установить compiz-fusion-plugins-extra compizconfig-settings-manager

Затем перейдите в System> Preferences> CompizConfig Settings Manager и в фильтре слева введите: «Размытие». Затем установите флажок «Размытие окон» и щелкните по нему («Размытие окон»).Затем в разделе «Фильтр размытия» выберите «Гауссовский» и для «Гауссовского радиуса» перетащите ползунок на «5». Вы, конечно, можете поиграть с этим значением в соответствии с вашими потребностями.

Устранение неполадок с поддержкой прозрачности RGBA


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

— вставьте это в терминал: 

  gedit ~ / .profile &

-и в файл .profile вставьте это:
  export GTK_MODULES = rgba
экспорт GTK_RGBA_APPS = allbut: firefox-bin: gnome-mplayer: totem: soffice

Вы можете добавить еще несколько приложений в строку «GTK_RGBA_APPS» — приложения, которые вы добавите, будут занесены в черный список, и для них не будет использоваться поддержка RGBA.

Отменить все изменения

Перейдите в System> Preferences> Gnome Color Chooser и на вкладке «Engine» снимите флажок «Global». Затем вы должны удалить пакеты, установленные в этом руководстве. Самый простой способ удалить PPA и все устанавливаемые им пакеты и заменить их пакетом Ubuntu по умолчанию — использовать PPA-Purge. Загрузите PPA Purge ЗДЕСЬ и установите его.

Затем в терминале введите: 

  sudo ppa-purge ppa: erik-b-andersen / rgba-gtk

Теперь все, что установлено из PPA, удалено.

Также удалите Gnome Color Chooser и gtk2-module-rgba (на тот случай, если он не был удален с помощью PPA Purge — он может не удалить его, потому что в официальных репозиториях Ubuntu нет аналогичного пакета): 

  sudo apt- get remove gtk2-module-rgba gnome-color-chooser

Если вы также хотите удалить Compiz и дополнительные плагины Compiz, выполните те же команды, что и при их установке, но замените «установить» на «удалить».

Вот и все! Надеюсь, я все рассказал.Для всего остального, смотрите ссылки ниже.

Обновление 1: PPA теперь также содержит пакеты Ubuntu 10.

No related posts.

alexxlab

Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт

Размеры css: Как задать ширину html страницы?

Брошюры примеры: 3300+ брошюры Шаблоны для бесплатной загрузки на Pngtree

Подбор шрифтовой пары: 404-Ошибка: 404

Как в инстаграмм сделать личный блог: Как сделать личный блог в Инстаграме: на телефоне, через Фейсбук

Буквы в стиле готика: Гарнированный готический шрифт стиля, помечает буквами A Иллюстрация вектора

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

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