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

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

Допустим есть какой-либо прозрачный фон блока:
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; >

Другая маска

Как сделать прозрачный фон, но не текст

Хочу сделать прозрачный фон, а в итоге получается, что текст тоже становится прозрачным. Как надо: . и как у меня:

.info < opacity: 0.9; background-color: #39312b; >.info-text h2 < font-family: 'Noto Sans', arial; font-size: 48px; line-height: 56px; font-weight: 400; text-transform: uppercase; color: #f0f0f0; >.info-text p

 
 
Декоративные покрытия
 
от лучших производителей





 
 

Отслеживать

34.1k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

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

Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.

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

CSS: Прозрачный текст с обводкой

Свойства меняющие цвет заливки и обводки текста с помощью CSS.

CSS 06.03.2021 3.2 г. Просмотров: 14.1k
Оценить код:

Комментарии

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

• Сниппеты
• —
• Дизайн и вёрстка
• —
• Прозрачный текст с обводкой

Ничего лишнего — только сниппеты на developer.donnoval.ru

2013-2024 © «Полезный код» | developer.donnoval.ru