Как сделать прозрачный текст css
Перейти к содержимому

Как сделать прозрачный текст 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; >

Другая маска

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

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

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

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

1. Прозрачный текст поверх картинки на CSS:

Прозрачный текст для фона с выводом знаков

2. Пишем текст поверх изображения на HTML:

Полупрозрачный текст поверх картинки на CSS

Установочный процесс:

ZORNET.RU

.painting <
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transform: scale(1.8);
animation: scaleImage 5s ease-out forwards;
>

.muvokan-tekstas <
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: ‘Roboto’, Arial, sans-serif;
font-size: calc(10px + 8vw);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.05em;
white-space: nowrap;
text-transform: uppercase;
color: #f7f7f7;
background-color: #080808;
mix-blend-mode: multiply;
opacity: 0;
animation: fadeInText 10s 2s ease-out forwards;
>

@keyframes scaleImage <
100% <
transform: scale(1);
>
>

@keyframes fadeInText <
100% <
opacity: 1;
>
>

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

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

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

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

Как придать тексту или изображению прозрачный фон с помощью CSS

.usamitev-savadem <
background: url(http://zornet.ru/_fr/56/s8961241.jpg) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
>

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

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

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

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

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

Как сделать — Изображение с прозрачным текстом

Узнать, как создать изображение с прозрачным (видеть насквозь) фоновым текстом, используя CSS.

Изображение с прозрачным текстом

Норвегия

Заголовок

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Создать изображение с прозрачным текстом

Шаг 1) Добавить HTML:

Пример

Блокнот

Заголовок

Lorem ipsum..

Шаг 2) Добавить CSS:

Пример

.container <
position: relative;
max-width: 800px; /* Максимальная ширина */
margin: 0 auto; /* Центр его */
>

.container .content position: absolute; /* Расположите фоновый текст */
bottom: 0; /* В самом низу. Используйте top: 0, чтобы добавить его к началу */
background: rgb(0, 0, 0); /* Цвет запасной вариант */
background: rgba(0, 0, 0, 0.5); /* Черный фон с 0,5 непрозрачностью */
color: #f1f1f1; /* Серый текст */
width: 100%; /* Полная ширина */
padding: 20px; /* Немного отступов */
>

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

colorpicker

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

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

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