Прозрачный текст на css

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате .


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

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

RGBA

С недавних пор современные браузеры научились работать с цветовой моделью RGBA — расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

  1. h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
  2. h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
  3. h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
  4. h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
  5. h5 { color: rgba(0, 0, 255, 0); } /* полностью прозрачный */

RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

Код в шестнадцатиричной системе

В CSS цвет можно установить с помощью числа в шестнадцатиричной системе счисления. Число состоит из шести знаков.

  • первые два знака устанавливают интенсивность красного цвета
  • вторые два знака устанавливают интенсивность зелёного
  • третьи два знака устанавливают интенсивность синего

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

5
color: #9C16B5;

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

67
color: #FFCC00;
color: #FC0;

В коде цвета буквы могут быть как большими, так и маленькими.

Проблемы доступности

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

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

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

  • WebAIM: Color Contrast Checker
  • Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

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

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

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

Color: rgb(255,255,0); color: rgb(100%,100%,0);

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

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

Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);

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

Body { background-image: url(img.jpg); } .prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; } .prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; } Попробовать »

Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA: background: rgb(255,255,0); background: rgba(255,255,0,0.5);

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

Значения цвета

В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:

Так же, как название цвет «Tomato»:

rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%)

Так же, как название цвета «Tomato», но 50% прозрачный:

rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5)

Пример

<h1 style=»background-color:rgb(255, 99, 71);»>…</h1><h1 style=»background-color:#ff6347;»>…</h1><h1 style=»background-color:hsl(9, 100%, 64%);»>…</h1><h1 style=»background-color:rgba(255, 99, 71, 0.5);»>…</h1><h1 style=»background-color:hsla(9, 100%, 64%, 0.5);»>…</h1>

RGBA

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.


Пример 2. Полупрозрачный фон

HTML5 CSS3 IE 9+ Cr Op Sa Fx

rgbaГоббс одним из первых осветил эту проблему с позиций психологии.

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Рис. 2. Полупрозрачный фон и непрозрачный текст

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

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

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

.element{

background : transparent ;

filter:progid :DXImageTransform .Microsoft .gradient(startColorstr= #990000ff ,

endColorstr= #990000ff ) ;

zoom: 1 ;

}

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF — полностью непрозрачный, 00 — прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…

В CSS есть три способа изменить прозрачность элемента:с помощью свойства opacity ,с помощью функции rgba() ,с помощью функции hsla() .

1. Свойство opacity

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

H1 {color: #CD6829;} div { background: #CDD6DB; opacity: .3; } Рис. 1. Прозрачность элементов с помощью opacity

2. Функция rgba()

Цветовая модель RGBA создает цветовой оттенок путем смешивания в необходимых пропорциях красного (Red) , зеленого (Green) и синего (Blue) цветов, а альфа-канал (Alpha) отвечает за степень прозрачности цвета. В отличие от свойства opacity , для блока, содержащего другие элементы, функция rgba() изменит прозрачность только блока.

3. Функция hsla()

Функция hsla() , параметры которой означают тон (Hue) , насыщенность (Saturation) , яркость (Lightness) и альфа-канал (Alpha) , также позволяет задать полупрозрачный цвет.

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

0/360° — красный цвет

60° — желтый цвет

120° — зеленый цвет

180° — голубой цвет

240° — синий цвет

270° — фиолетовый цвет

300° — пурпурный цвет .

Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1) . Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1) , а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1) .

Шестнадцатеричные значения цветов


Шестнадцатеричный код цвета представляет собой шесть символов, стоящих после символа #:

Каждый набор двух символов представляет номер от 0 до 255. Так первые два символа представляют красный (red) цвет, следующие два — зеленый (green) и последние два — синий (blue). В этом шестнадцатеричный код очень похож на RGB с тем отличием, что тут каждый цвет задан в шестнадцатеричной системе счисления вместо десятичной.

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

color: #f00;           
color: #ff0000;        

Примечание: браузеры, которые не поддерживают подобные цветовые значения (rgba, hsl и hsla), не связывают с фоном или шрифтом никакой цвет, полностью игнорируя объявление. В этом случае для фона элемента используется значение по умолчанию (он становится полностью прозрачным), а для текста используется либо значение по умолчанию (черный цвет), либо цвет унаследованный от родительского элемента.

Для старых версий браузеров следует добавить дополнительное правило, определяющее цвет в формате RGB, шестнадцатеричном значении или с помощью имени. Такое правило должно находиться перед правилом, указывающим цвет в формате RGBA, HSL или HSLA. Это обеспечит страховку для цвета, поскольку в CSS при наличии двух правил, устанавливающих значение для одного и того же свойства, приоритет всегда получает правило, установленное ниже в коде. Это означает, что если браузер поддерживает форматы RGBA, HSL или HSLA, то он будет использовать второе правило, а если не поддерживает — первое.

RGB и RGBA

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255. Рассмотрим RGB-код для темно-фиолетового цвета: rgb(204, 51, 255), его можно например применить к CSS свойству, отвечающему за цвет шрифта:

color: rgb(205, 51, 255);
color: rgba(204, 51, 255, 0.5);

Вы можете увидеть, что значения красного, зеленого и синего цветов аналогичны системе RGB. Четвертое число — 0.5 является степенью прозрачности. Буква «A» в RGBA означает альфа-канал, который является термином из графического дизайна означающим прозрачность.

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

Прокрутка фона

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

background-attachment: scroll — фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)

background-attachment: fixed — фон зафиксирован относительно левого верхнего угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке блока

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

Стиль:

353637 3839404142
#div5
  {
  width: 500px;
  height: 450px;
  background-image: url("image.jpg");
  overflow: auto;
  background-attachment: local;
  }

HTML код:

464748
<div id="div5">
<div style="height: 800px; width: 10px; border: 1px solid Red"></div>
</div>

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

CSS:

.background { text-align: center; background: url(«background.jpg») top center; padding: 120px 10px; } .transparent { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 50px; line-height: 50px; text-transform: uppercase; background: #000; color: #FFF; mix-blend-mode: multiply; padding: 10px 20px; display: inline-block; /* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */ }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.background {

text-aligncenter;

backgroundurl(«background.jpg»)topcenter;

padding120px10px;

}

.transparent {

font-familyTahoma,sans-serif;

font-weightbold;

font-size50px;

line-height50px;

text-transformuppercase;

background#000;

color#FFF;

mix-blend-modemultiply;

padding10px20px;

displayinline-block;

/* text-shadow: 0 0 8px rgba(0,0,0,5), 0 2px 4px rgba(0,0,0,0.7); */

}

В итоге у нас получится это:

Цвет в CSS

Последнее обновление: 21.04.2016

В CSS широкое распространение находит использование цветов. Чтобы установить цвет текста, фона или границы, нам надо указать цвет.

Например, определим красный цвет для фона элемента div:

div{
	background-color: red;
}

В CSS есть несколько различных свойств, которые в качестве значения требует определенный цвет. Например, за установку цвета текста отвечает свойство color, за установку фона элемента — свойство background-color, а за установку цвета границы — border-color.

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

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

При этом не столь важно, в каком регистре будут символы.

Значение RGB. Значение RGB также представляет последовательно набор значений для красного, зеленого и синего цветов (Red — красный, Green — зеленый, Blue — синий)

Значение каждого цвета кодируется тремя числами, которые могут представлять либо процентные соотношения (0–100%), либо число от 0 до 255. Например background-color: rgb(100%,100%,100%); Здесь каждый цвет имеет значение . И в итоге при смешивании этих значений будет создаваться белый цвет. А при значениях в 0% будет генерироваться черный цвет: background-color: rgb(0%, 0%, 0%); Между 0 и 100% будут находиться все остальные оттенки. Но, как правило, чаще применяются значения из диапазона от 0 до 255. Например, background-color: rgb(28, 68, 99);

Значение RGBA. Это тоже самое значение RGB плюс компонент прозрачности (Alpha). Компонент прозрачности имеет значение от 0 (полностью прозрачный) до 1 (не прозрачный). Например: background-color: rgba(28, 68, 99, .6);

Значение HSL. HSL представляет аббривиатуру: Hue — тон, Saturation — насыщенность и Lightness — осветленность. HSL задает три значения. Первое значение Hue угол в круге оттенков — значение в градусах от 0 до 360. Например, красный — 0 (или 360 при полном обороте круга). Каждый цвет занимает примерно 51°. Второе значение — Saturation — представляет насыщенность, то указывает, насколько чистым является цвет. Насыщенность определяется в процентах от 0 (полное отсутствие насыщенности) до 100% (яркий, насыщенный цвет). Третье значение — Lightness — определяет осветленность и указывается в процентах от 0 (полностью черный) до 100 (полностью белый). Для получения чистого цвет применяется значение 50 %. Например:

background-color: hsl(206, 56%, 25%);

Данный цвет является эквивалентом значений и

Значение HSLA. Аналогично RGBA здесь к HSL добавляется компонента прозрачности в виде значения от 0 (полностью прозрачный) до 1 (не прозрачный). Например: background-color: hsl(206, 56%, 25%, .6);

Строковые значения. Существует ряд константных строковых значений, например, red (для красного цвета) или green (для зеленого цвета). К примеру, color: red; является эквивалентом color: #ff0000;

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

Ряд настроек цвета позволяют установить значение для альфа-компоненты, которая отвечает за прозрачность. Но также в CSS есть специальное свойство, которое позволяет установить прозрачность элементов — свойство opacity. В качестве значения оно принимает число от 0 (полностью прозрачный) до 1 (не прозрачный):

div{
	width: 100px;
	height: 100px;
	
	background-color: red;
	opacity: 0.4;
}

НазадВперед

Задание фона в RGBA


Избежать этой проблемы мы сможем в том случае, если откажемся от использования opacity и зададим значение для css-свойства background в формате RGBA.

Формат RGBA дает нам возможность задать значение цвета, используя значение красного, зеленого, а так же синего цветов в десятичном виде, а так же, позволяет задать прозрачность при помощи использования альфа-канала. Уровень альфа-канала задается в интервале от 0 до 1. То есть, так же как и в css-свойстве opacity. Например так: background:rgba(255,255,255,0.6);

Для наглядности добавим в блок с фоном еще один элемент с текстом, для которого зададим в css фон в формате RGBA с уровнем прозрачности 0.3.

Вот что у нас получилось:

Блок без прозрачности

Демонстрация работы css-свойства opacity

Так выглядит фон с RGBA

В код страницы был добавлен следующий фрагмент HTML-кода:

XHTML

<div class=»rgba»> Так выглядит фон с RGBA </div>

1 2 3

<div class=»rgba»>

Так выглядит фон с RGBA </div>

В css-файл я прописала следующие свойства для соответствующего класса:

CSS

.rgba{ width: 300px; padding:30px; margin:auto; text-align:center; margin:10px; font-size:18px; color:#fff; background:rgba(0,0,0,0.3); }

1 2 3 4 5 6 7 8 9 10 11

.rgba{

width300px;

padding30px;

marginauto;

text-aligncenter;

margin10px;

font-size18px;

color#fff;

backgroundrgba(0,0,0,0.3);

}

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

С уважением Юлия Гусарь

color

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

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

Того же эффекта можно достичь, если изменить порядок слоёв, поместив цвет под фотографию, и наложить фотографию с помощью режима наложения (Яркость).

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity


С этим читают