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

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

Сегодня в своей практике столкнулся с тем, что для фона меню необходимо было поставить прозрачность. Был вариант конечно сделать это с помощью картинки .png, но все же решил покапать и сделать полупрозрачный фон с помощью CSS. Оказалось это совсем несложным 🙂

В html-коде прописываем «класс», для которого необходимо установить определенную прозрачность:

далее открываем таблицу стилей CSS и вбиваем там свойства для данного "класса":

тем самым я указал цвет фона, выставив значения для трех основных цветов (красный — r, зеленый — g, синий — b), и прозрачность фона на 50% ( alpha — a) одним свойством. Значения для цвета указывается в диапазоне от 0 до 255, а для прозрачности диапазон будет от 0.0 до 1.0

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

В таком случае прозрачными станут все элементы, находящиеся в данном классе, в том числе картинки и текст будут прозрачными.

Опубликовано: 6 апреля 2011
Другие полезные статьи на нашем блоге

• ⭐ Timeweb — отзыв и подробный обзор Привет! Timeweb — это компания, которая предоставляет услуги хостинга и VPS/VDS сервера в аренду. Этот пост можно воспринимть как отзыв о Timeweb, поскольку описывать я буду свой персонльный опыт работы…
• ⭐ Сайт на Elementor медленно загружается. Что делать? Привет! Хочу поделиться своим мнением про плагин для WordPress Elementor, и рассказать о том, почему сайты на Elementor получаются «плохими» и «медленными» в большинстве случаев. Парочка важных поправок Во-первых, сам…
• ⭐ Laravel или WordPress — что выбрать для своего сайта? Привет! Это статья для владельцев сайтов и для тех, кто хочет запустить свой Онлайн-проект или Интернет сервис. Ну, если ты придумал какой-то микро-стартап или нужен сайт для обслуживания твоего бизнеса…
• ⭐ Docker — лучшие уроки и учебные материалы для изучения Привет! Видимо ты уже задумался над тем, чтобы изучить Docker, который становится неотъемлемой частью современного Web-разработчика и программиста. Возникает вопрос: как найти самые лучшие уроки и учебные материалы для изучения…

прозрачный type=text

На сколько я знаю в html текст прозрачным не может быть, на то он и текст чтоб его читали. Если даже текст прозрачным сделать, как же в форму что-то писать, вы думаете это будет читабельно? ——————— UPD: Хотя попробуйте это применить: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;

На сайте с 02.08.2008
23 мая 2011, 22:33

Сашко:
. UPD: Хотя попробуйте это применить: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;

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

show must go on .
На сайте с 29.05.2008
23 мая 2011, 22:43
А для input[type*=text] задать беграунд не судьба? Или уже задать id, а потом в CSS.
На сайте с 10.05.2007
24 мая 2011, 05:25
или я не так выразился или вы не так поняли, прозрачным должен быть не текст а именно поле для ввода
На сайте с 02.08.2008
24 мая 2011, 05:27

alexpnet:
или я не так выразился или вы не так поняли, прозрачным должен быть не текст а именно поле для ввода

Изображение с прозрачным текстом на 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.

Второй вариант:

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

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;
>

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

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

Узнать, как создать изображение с прозрачным (видеть насквозь) фоновым текстом, используя 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 видео

ВЫБОР ЦВЕТА

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

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

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

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

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

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

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

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