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

body < background: linear-gradient(to right, #0A0718, #CA2738); padding: 20px; >span < font-style: italic; font-size: 80px; font-family: sans-serif; font-weight: 900; text-shadow: 0 0 2px #fff; color: #0A0718; >@supports (-webkit-text-stroke: 1px white) < span < text-shadow: none; color: transparent; -webkit-text-stroke: 1px #fff; >>

PRICE

. причина была в том, что для body <> был также набор цветов, который затем отображался вместо цвета

vchrizz 23 нояб. 2016, в 20:09
Замечание: это решение меняет не только непрозрачность, но и цвет.
Eugene Kardash 27 апр. 2017, в 02:39

@vchrizz Чтобы переопределить ранее установленное правило, используйте ключевое слово! пример: color: rgba( 0, 255, 0, 0.5) !important

Eugene Kardash 27 апр. 2017, в 02:43
Показать ещё 11 комментариев

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

.text

Harry Escott 02 дек. 2014, в 18:17
Поделиться

Лучшее решение — посмотреть на тег «непрозрачность» элемента.

.image < opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ >

Итак, в вашем случае это должно выглядеть примерно так:

THIS IS MY TEXT 

Однако не забывайте, что тег не поддерживается в HTML5.

Вы также должны использовать CSS:)

Как сделать текст полупрозрачным?

В CSS для определения полупрозрачного цвета есть специальный формат RGBA. Этот формат задаёт цвет в виде значений трёх компонент — красной, зелёной и синей, каждая из компонент меняется от 0 до 255. Четвёртым параметром идёт степень прозрачности этого цвета, задаётся от 0 до 1. Цвет в итоге может быть полностью прозрачным, полупрозрачным или полностью непрозрачным.

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

Ниже представлены варианты определения цвета текста.

color: rgba(0,0,0,0) /* Полностью прозрачный текст */ color: rgba(0,0,0,1) /* Чёрный текст */ color: rgba(0,0,0,0.5) /* Полупрозрачный чёрный текст */ color: rgba(255,255,255,0.5) /* Полупрозрачный белый текст */ color: rgba(237,28,36,0.8) /* Полупрозрачный красный текст */

В примере 1 показано создание двух блоков — для сравнения в первом блоке цвет задан белым через шестнадцатеричное значение, во втором блоке цвет задан через функцию rgba() .

Пример 1. Использование rgba()

См. также

• color
• currentColor
• text-fill-color
• Атрибут link
• Единицы цвета в CSS
• Наследование в CSS
• Работа с типографикой

text — decoration

Добавляем любому тексту чёрточку. Или убираем, где она есть, но не нужна.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Егор Левченко ,
• Светлана Коробцева

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

text — decoration : underline часто встречается при работе со ссылками.

Пример

Скопировать ссылку «Пример» Скопировано

Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text — decoration .

   
Диакритические знаки.





  
В типографике.
  
Диакритическими знаками не могут.
  
Черта сверху — типографический знак.
   div class="parent"> p class="none">Диакритические знаки. p> p class="underline">В типографике. p> p class="line-through">Диакритическими знаками не могут. p> p class="overline">Черта сверху — типографический знак. p> div>    Скопировать Скопировано Не удалось скопировать   

 .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none;> .underline  /* Нижнее подчёркивание */ text-decoration: underline;> .line-through  /* Перечёркнутый текст */ text-decoration: line-through;> .overline  /* Линия над текстом */ text-decoration: overline;> .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none; > .underline  /* Нижнее подчёркивание */ text-decoration: underline; > .line-through  /* Перечёркнутый текст */ text-decoration: line-through; > .overline  /* Линия над текстом */ text-decoration: overline; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

По факту свойство text — decoration является шорткатом и позволяет указать значения для свойств:

• text — decoration — line — положение декоративной линии;
• text — decoration — style — стиль декоративной линии;
• text — decoration — color — цвет декоративной линии.

Но, как правило, его используют только для указания положения линии.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Положение линии

Скопировать ссылку «Положение линии» Скопировано

Пишем свойство text — decoration и после двоеточия указываем одно из доступных значений:

• underline — подчёркнутый текст.
• line — through — перечёркнутый текст.
• overline — надчёркнутый текст, линия находится над словами.
• none — отменяет все эффекты.

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

Стиль линии

Скопировать ссылку «Стиль линии» Скопировано

Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

Для управления стилем линии используются следующие ключевые слова:

• solid — сплошная линия. Значение по умолчанию.
• double — двойная линия.
• dotted — точечная линия.
• dashed — пунктирная линия.
• wavy — волнистая линия.

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

Как будет выглядеть двойное перечёркивание:

 p  text-decoration: line-through double;> p  text-decoration: line-through double; >    Скопировать Скопировано Не удалось скопировать   

Стиль линии можно указать отдельно при помощи свойства text — decoration — style .

Цвет линии

Скопировать ссылку «Цвет линии» Скопировано

Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text — decoration .

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

Например, сделаем двойное подчёркивание красного цвета:

 p  text-decoration: underline double #ff0000;> p  text-decoration: underline double #ff0000; >    Скопировать Скопировано Не удалось скопировать   

Цветом линии можно управлять отдельно при помощи свойства text — decoration — color :

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

�� Значение по умолчанию для обычного текста — none . Но для ссылок ( ) значение по умолчанию — underline .

�� Свойство text — decoration целиком нельзя анимировать при помощи свойства transition ��

Но можно анимировать цвет линии!

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

 
К диакритикам.
 
Дополнение подчёркивается.
 
Эпанортозис.
 
В большинстве языков.
  p class="none">К диакритикам. p> p class="underline">Дополнение подчёркивается. p> p class="line-through">Эпанортозис. p> p class="overline">В большинстве языков. p>    Скопировать Скопировано Не удалось скопировать   

 p  transition: text-decoration-color 0.3s;> .none  text-decoration: none;> .underline  text-decoration: underline;> .line-through  text-decoration: line-through;> .overline  text-decoration: overline;> .dotted  text-decoration-style: dotted;> .double  text-decoration-style: double;> .wavy  text-decoration-style: wavy;> .blue:hover  text-decoration-color: #1a5ad7;> .red:hover  text-decoration-color: #ed6742;> .green:hover  text-decoration-color: #49a16c;> p  transition: text-decoration-color 0.3s; > .none  text-decoration: none; > .underline  text-decoration: underline; > .line-through  text-decoration: line-through; > .overline  text-decoration: overline; > .dotted  text-decoration-style: dotted; > .double  text-decoration-style: double; > .wavy  text-decoration-style: wavy; > .blue:hover  text-decoration-color: #1a5ad7; > .red:hover  text-decoration-color: #ed6742; > .green:hover  text-decoration-color: #49a16c; >    Скопировать Скопировано Не удалось скопировать   

�� Нельзя управлять толщиной и точным положением линии, заданной при помощи text — decoration .

�� Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы : : before или : : after .

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

�� Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line — height . Чем больше высота строки, тем ниже будет полоса подчёркивания.

К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text — decoration и используем border — bottom или логический аналог border — block — end .

       О магазине   О тыквах   О нас   Контакты      
Магазин «Резная тыква»   header> div class="container top"> nav> ul class="navigation"> li class="navigation__item"> a href="#" class="navigation__link">О магазинеa> li> li class="navigation__item"> a href="#" class="navigation__link">О тыквахa> li> li class="navigation__item"> a href="#" class="navigation__link">О насa> li> li class="navigation__item"> a href="#" class="navigation__link">Контактыa> li> ul> nav> div> div class="container"> h1>Магазин «Резная тыква»h1> div> header>    Скопировать Скопировано Не удалось скопировать   

 .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none;> .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor;> .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none; > .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor; >    Скопировать Скопировано Не удалось скопировать   

Открыть демо в новой вкладке + Развернуть

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text — decoration : none . Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

�� Отдельные свойства — text — decoration — line , text — decoration — style и text — decoration — color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.