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

Как сделать полупрозрачный текст в 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
  • Работа с типографикой
  • Функция rgba()

CSS: Прозрачный фон текста, сохраняя видимость самого текста

Чтобы сделать фон текста полупрозрачным, используйте формат rgba для свойства background-color . Параметр альфа-канала в формате rgba определяет степень прозрачности: 0 обозначает полную прозрачность, а 1 – непрозрачность. Пример применения:

Скопировать код

.transparent-bg < background-color: rgba(0, 0, 0, 0.5); /* Создаем полупрозрачный фон */ >

Скопировать код

Этот код создает текст на фоне, прозрачность которого составляет 50%. В то же время сам текст остается ясно видимым.

Работаем умнее, а не больше: продвинутые методы применения прозрачности

По мере усложнения дизайна, встает вопрос о необходимости освоения методик работы со сложением слоев, позиционированием и созданием альтернативных решений для устаревших браузеров.

Альтернативы для старых браузеров: не забывайте про IE

Не все браузеры поддерживают формат rgba . Чтобы обеспечить кроссбраузерность, рекомендуется использовать специфические расширения для совместимости с IE, включая -ms-filter .

Полупрозрачный текст на фоне изображения

Здесь вы узнаете, как сделать изображение с полупрозрачным блоком текста при помощи CSS.

Notebook

Заголовок

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

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

Шаг 1) Добавляем HTML:

  
Notebook

Заголовок

Ясность нашей позиции.

Шаг 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 (50%) */ color: #f1f1f1; /* Серый цвет текста */ width: 100%; /* Растягиваем на всю ширину */ padding: 20px; /* Добавим отступов */ >

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

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

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

Демо

Как обычно начнем с HTML разметки:

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

Заголовок h1 мы поместили в контейнер div, оба элемента — блочные и на странице пока виден — невзрачный текст. Разметка сделана, переходим в файл стилей. Обнуляем поля и отступы одновременно у body и h1.

body, h1 margin: 0;
padding: 0;
font-family: ‘Alegreya Sans SC’, sans-serif;
>

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

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

После обнуления margin и padding, проблема исчезает. Еще, я прописал шрифт из коллекции Google Font, если в названии шрифта больше одного слова, то его заключают в кавычки. Кроме того, все сторонние шрифты, которых обычно нет на компьютере пользователя, обязательно надо подключать в файле стилей.

Фотография на все окно браузера

На сайте pixabay.com выбираете понравившееся вам фото, сохраняете себе на компьютер или просто копируете URL картинки и вставляете в код селектора div.

div background: url(https://cdn.pixabay.com/photo/2018/03/19/20/20/wheat-3241114_1280.jpg);
>

Все прописанные свойства ниже, растягивают фотографию, как фон, на весь экран браузера.

div height: 100vh;
background-size: cover;
background-repeat: no-repeat;
>

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

h1 font-size: 6em;
position: absolute;
top: 30%;
text-align: center;
text-transform: uppercase;
>

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

Эффект полупрозрачного текста с наложением слоев

Для эффекта надо добавить всего лишь 4 свойства для селектора h1.

Цвет текста делаем белым и полупрозрачным.

color: rgba(255, 255, 255,.7);

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

Создаем тень для заголовка

text-shadow: 0 5px 10px rgba(0,0,0,1);

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

Создаем нижнюю тень для блока h1

box-shadow: 0 5px 10px rgba(0,0,0,1);

Это придаст небольшую объемность всей композиции.

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

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

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

Поддержка браузерами

Свойство mix-blend-mode, поддерживается всеми современными браузерами, за исключением Internet Explorer и Edge. Однако Microsoft реализацию поддержки включил в список «на рассмотрении» для Edge. Поэтому у нас есть надежда, на скорейшую полную поддержку всеми браузерами.

Код полупрозрачного текста на фоне:

Для систематического изучения HTML5 и CSS3, будет полезным пройти мой видеокурс.

Создано 01.06.2018 10:08:20

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

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

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

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

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