Как сделать текст полупрозрачным?
В 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
- Работа с типографикой
CSS: Прозрачный текст с обводкой
Свойства меняющие цвет заливки и обводки текста с помощью CSS.
CSS 06.03.2021 2.7 г. Просмотров: 12k
Оценить код:
Комментарии
Ваш комментарий будет первым.
Войдите, чтобы оставить комментарий.
- Сниппеты
- —
- Дизайн и вёрстка
- —
- Прозрачный текст с обводкой
Ничего лишнего — только сниппеты на developer.donnoval.ru
2013-2023 © «Полезный код» | developer.donnoval.ru
Прозрачный текст относительно фона
Допустим есть какой-либо прозрачный фон блока:
background-color: rgba(255, 255, 255, 0.75);
И на этом блоке отображается текст со следующим свойством:
color: rgba(255, 255, 255, 0.25);
Фон сайта задан так:
body < background-image: url(../images/font1.jpg);>
В итоге прозрачность текста видна относительно родительного элемента.
Фон сайта не виден с такой прозрачностью текста.
Как реализовать прозрачность текста к фону сайта в каком-либо элементе?
Т.е. в итоге будет видна часть фона из текста.
Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 3 окт 2016 в 18:27
Dmitriy Doronin Dmitriy Doronin
437 5 5 серебряных знаков 19 19 бронзовых знаков
Вам, видимо, нужен nimbupani.com/…
3 окт 2016 в 18:35
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вероятно таким образом.
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700); body < font-family: 'Oswald', sans-serif; color: #fff; background-color: #000; >.wrapper < text-align: center; >.title < font-size: 2em; position: relative; margin: 0 auto 1em; padding: 1em 1em .25em 1em; text-align: center; text-transform: uppercase; >.title:after < position: absolute; top: 100%; left: 50%; width: 240px; height: 4px; margin-left: -120px; content: ''; background-color: #fff; >/* Clip text element */ .clip-text < font-size: 6em; font-weight: bold; line-height: 1; position: relative; display: inline-block; margin: .25em; padding: .5em .75em; text-align: center; /* Color fallback */ color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; >.clip-text:before, .clip-text:after < position: absolute; content: ''; >/* Background */ .clip-text:before < z-index: -2; top: 0; right: 0; bottom: 0; left: 0; background-image: inherit; >/* Text Background (black zone) */ .clip-text:after < position: absolute; z-index: -1; top: .125em; right: .125em; bottom: .125em; left: .125em; background-color: #000; >/* Change the background position to display letter when the black zone isn't here */ .clip-text--no-textzone:before < background-position: -.65em 0; >.clip-text--no-textzone:after < content: none; >/* Use Background-size cover for photo background and no-repeat background */ .clip-text--cover, .clip-text--cover:before < background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; >/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */ .clip-text_one < background-image: url(http://lorempixel.com/480/200/abstract/7); >.clip-text_two < background-image: url(http://lorempixel.com/480/200/abstract); >.clip-text_tree < background-image: url(http://lorempixel.com/480/200/abstract/2); >.clip-text_four < background-image: url(http://lorempixel.com/480/200/abstract/4); >.clip-text_five < background-image: url(http://lorempixel.com/480/200/abstract/5); >.clip-text_six < background-image: url(http://lorempixel.com/480/200/abstract/9); >.clip-text_seven < background-image: url(http://lorempixel.com/480/200/abstract/8); >.clip-text_eight < background-image: url(http://lorempixel.com/410/200/people); >.clip-text_nine < background-image: url(http://lorempixel.com/480/200/nightlife); >.clip-text_ten < background-image: url(http://lorempixel.com/480/200/nightlife/8); >.clip-text_eleven < background-image: url(http://lorempixel.com/480/200/fashion/10/cc); background-size: cover; >.clip-text_twelve < background-image: url(http://lorempixel.com/480/200/people/7/cc); >.clip-text_thirteen < background-image: url(http://lorempixel.com/480/200/food/5/cc); >.clip-text_fourteen < background-image: url(http://lorempixel.com/480/200/city/9/cc); >.clip-text_fifteen < background-image: url(http://lorempixel.com/480/200/nightlife/5); > Mask Mask Еще маска Mask Mask Mask Mask Mask Mask Mask Mask Mask Mask Mask Mask Mask html, body < background: grey; >p < margin: 0px; >#clip< /* Бекграунд добавлять первым */ background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==); background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-size: 28vw; font-weight: bold; text-align: center; >Другая маска
Изображение с прозрачным текстом на CSS
Для того, чтобы на изображении был простой прозрачный текст, то изначально ваша картинка или фоновое изображение должны быть в элементе div, но, а блок контента идет в другом элементе div.
Далее нужно задействовать CSS-свойство opacity, чтобы установить прозрачное изображение или текст. Свойство opacity используется для настройки прозрачности текста или фотографии, где как уже было сказано, что в этом плане вы можете поставить палитру и выставить прозрачность. И здесь нужно знать значение непрозрачности, которое может составлять от 0,0 до 1,0, где низкое значение демонстрирует высокую прозрачность, а высокое значение показывает низкую прозрачность. Степень непрозрачности считается как непрозрачность% = непрозрачность * 100.
Как создать изображение с прозрачным текстом с помощью CSS
ZorNet.Ru — сайт для вебмастера
В то время как маркетологи и компании используют лучшие методы SEO, чтобы увеличить охват и увеличить трафик, поисковые системы ежедневно меняют свои алгоритмы — трансформируя эти лучшие практики. Сложность в том, что никто не знает, что это за алгоритмы.
.kudasd-socumen <
position: relative;
max-width: 645px;
margin: 0 auto;
>
.kudasd-socumen img <
vertical-align: middle;
>
.kudasd-socumen .dsanu-poged <
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Запасной цвет */
background: rgba(14, 14, 14, 0.5); /* Черный фон с непрозрачностью 0,5 */
color: #f3f3f7;
width: 100%;
padding: 18px;
>
Давайте посмотрим на другой пример, где текст установлен на фоновом изображении. Или вместо свойства непрозрачности вы можете просто установить значение цвета RGBA.
Второй вариант:
Тема аналогична, только темно прозрачный формат идет на все изображение, а по центру по вверх прописаны знаки.
ZorNet.Ru — сайт для вебмастера
body <
font-family: ‘Source Sans Pro’, sans-serif;
>
header <
background:
linear-gradient(
rgba(14, 14, 14, 0.5),
rgba(14, 14, 14, 0.5)
), url(http://zornet.ru/_fr/56/0712999.jpg);
background-size: cover;
height: 100vh;
>
.cugasup-ukedmen <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
>
h1 <
text-transform: uppercase;
margin: 0;
font-size: 3rem;
white-space: nowrap;
>
Где при открытие страницы мы наблюдаем изображение на полный экран, где также идут аналогичные эффекты затемнение для описание название или заголовков по тематике.