How to change text transparency in HTML/CSS?
However, I’m not sure how to change its opacity. I’ve tried looking online, but I’m not sure exactly what to do with the code I find.
10 Answers 10
opacity applies to the whole element, so if you have a background, border or other effects on that element, those will also become transparent. If you only want the text to be transparent, use rgba .
Also, steer far, far away from <font> . We have CSS for that now.
Check Opacity, You can set this css property to the div, the <p> or using <span> you want to make transparent
And by the way, the font tag is deprecated, use css to style the text
Edit: This code will make the whole element transparent, if you want to make ** just the text ** transparent check @Mattias Buelens answer
Just use the rgba tag as your text color. You could use opacity , but that would affect the whole element, not just the text. Say you have a border, it would make that transparent as well.
Your best solution is to look at the «opacity» tag of an element.
So in your case it should look something like :
However don’t forget the tag isn’t supported in HTML5.
You should use a CSS too 🙂
What about the css opacity attribute? 0 to 1 values.
But then you probably need to use a more explicit dom element than «font». For instance:
As an additional information I would of course suggest you use CSS declarations outside of your html elements, but as well try to use the font css style instead of the font html tag.
For cross browser css3 styles generator, have a look at http://css3please.com/
Easy! after your:
you just have to change the ".6" for a decimal number between 1 and 0
There is no CSS property like background-opacity that you can use only for changing the opacity or transparency of an element’s background without affecting the child elements, on the other hand if you will try to use the CSS opacity property it will not only changes the opacity of background but changes the opacity of all the child elements as well. In such situation you can use RGBA color introduced in CSS3 that includes alpha transparency as part of the color value. Using RGBA color you can set the color of the background as well as its transparency.
Полупрозрачный текст на фоне в CSS
На этом уроке я покажу вам как сделать очень необычный текстовый эффект, применяя чистый CSS. Для этого потребуется большая фотография в качестве фона, а сверху фона мы напишем крупный заголовок нестандартным шрифтом.
Как обычно начнем с HTML разметки:
Заголовок h1 мы поместили в контейнер div, оба элемента — блочные и на странице пока виден — невзрачный текст. Разметка сделана, переходим в файл стилей. Обнуляем поля и отступы одновременно у body и h1.
body, h1 <
margin: 0;
padding: 0;
font-family: 'Alegreya Sans SC', sans-serif;
>
Я не зря выше упомянул, что h1 тоже является блочным элементом, а это значит, что вокруг заголовка браузеры по умолчанию создают свои поля и отступы.
После обнуления 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;
>
Эффект полупрозрачного текста с наложением слоев
Для эффекта надо добавить всего лишь 4 свойства для селектора h1.
Цвет текста делаем белым и полупрозрачным.
Создаем тень для заголовка
Создаем нижнюю тень для блока h1
Это придаст небольшую объемность всей композиции.
Смешиваем слои, теперь нижний слой с фотографией чётко проглядывает сквозь полупрозрачный текст, не перекрывая его. Красота эффекта напрямую будет зависеть от выбранного изображения и шрифта.
Поддержка браузерами
Свойство mix-blend-mode, поддерживается всеми современными браузерами, за исключением Internet Explorer и Edge. Однако Microsoft реализацию поддержки включил в список «на рассмотрении» для Edge. Поэтому у нас есть надежда, на скорейшую полную поддержку всеми браузерами.
Код полупрозрачного текста на фоне:
Для систематического изучения HTML5 и CSS3, будет полезным пройти мой видеокурс.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Свойство CSS opacity
Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.
Синтаксис CSS opacity
Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).
Примеры: как прозрачность в html
Пример №1. Прозрачное изображение в html
Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5
На странице преобразуется в следующее
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
Как изменить прозрачность текста в HTML / CSS?
Однако я не уверен, как изменить его непрозрачность. Я пробовал смотреть в Интернете, но я не уверен, что делать с кодом, который я нахожу.
7 ответов
Проверьте Opacity, вы можете установить это свойство css в div, <p> или используя <span> , который вы хотите сделать прозрачным
И, кстати, тег шрифта устарел, используйте css для стилирования текста
Изменить: этот код сделает весь элемент прозрачным, если вы хотите сделать ** просто текст ** прозрачный чек @Mattias Buelens answer
opacity применяется ко всему элементу, поэтому, если у вас есть фон, граница или другие эффекты для этого элемента, они также станут прозрачными. Если вы хотите, чтобы текст был прозрачным, используйте rgba .
Также, поверните далеко, далеко от <font> . Теперь у нас есть CSS.
Просто используйте тег rgba в качестве цвета текста. Вы можете использовать opacity , но это повлияет на весь элемент, а не только на текст. Скажем, у вас есть граница, это сделает ее прозрачной.
Лучшее решение — посмотреть на тег «непрозрачность» элемента.
Итак, в вашем случае это должно выглядеть примерно так:
Однако не забывайте, что тег не поддерживается в HTML5.
Вы также должны использовать CSS:)
Легко! после вашего:
вам просто нужно изменить «.6» для десятичного числа от 1 до 0
Нет свойства CSS, например background-opacity, которое можно использовать только для изменения непрозрачности или прозрачности фона элемента, не затрагивая ребенка элементов, с другой стороны, если вы попытаетесь использовать свойство непрозрачности CSS, это не только изменит непрозрачность фона, но и изменяет непрозрачность всех дочерних элементов. В такой ситуации вы можете использовать цвет RGBA, введенный в CSS3, который включает альфа-прозрачность как часть значения цвета. Используя цвет RGBA, вы можете установить цвет фона, а также его прозрачность.
Как насчет атрибута css opacity ? 0 до 1 .
Но тогда вам, вероятно, нужно будет использовать более явный элемент dom, чем «font». Например:
В качестве дополнительной информации я бы, конечно, предложил вам использовать объявления CSS за пределами ваших элементов html, но также попробуйте использовать стиль шрифта css вместо тега html шрифта.