Как изменить прозрачность текста в HTML / CSS?

112

Я очень новичок в HTML / CSS, и я пытаюсь отобразить какой-то текст как 50% прозрачный. Пока у меня есть HTML для отображения текста с полной непрозрачностью

<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

Однако я не знаю, как изменить его непрозрачность. Я пробовал поискать в Интернете, но не совсем уверен, что делать с найденным кодом.

html css opacity Nosrettap
источник

Ответы:

268

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

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

Кроме того, держитесь подальше от <font>. Для этого у нас есть CSS.

Маттиас Буэленс
источник
8
Гораздо лучшее решение по сравнению с принятым ответом, ИМО. Вам не нужно добавлять дополнительный элемент диапазона в HTML, чтобы применить непрозрачность только к тексту.
kinsho
Это решение.
GhitaB
какие браузеры в этом смысле "старые"?
Рик Дэвис
1
@RickDavies Согласно caniuse.com , требуется IE9 или выше. Если вам нужна поддержка IE8, вам все равно понадобится запасной вариант. В противном случае у вас должно быть все в порядке с просто rgba.
Маттиас Буэленс,
Хмммм, свойство непрозрачности тоже. Вот это да.
trusktr 04
105

Проверьте непрозрачность , вы можете установить для этого свойства css значение div, <p>или using, которое <span>вы хотите сделать прозрачным

И, кстати, тег шрифта устарел , используйте CSS для стилизации текста

div {
    opacity: 0.5;
}

Изменить: этот код сделает весь элемент прозрачным, если вы хотите сделать ** только текст ** прозрачной проверкой @Mattias Buelens answer

Марио Корчеро
источник
16
Используйте <span>, Люк!
плов
20
Это неверный ответ. Его код делает полупрозрачным весь элемент (div). В Вопросе указан только текст. Ответ братьев и сестер, получивший большее количество голосов, должен быть принятым.
Basil Bourque
Спасибо. Это действительно помогло мне скрыть текст в моем шаблоне WordPress. Вместо (opacity: 0.5;) я просто использовал (opacity: 0;).
Marcielli Oliveira 07
17

Просто используйте rgbaтег в качестве цвета текста. Вы можете использовать opacity, но это повлияет на весь элемент, а не только на текст. Допустим, у вас есть граница, она также станет прозрачной.

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
Гарри Эскотт
источник
9

Лучшее решение - посмотреть на тег «непрозрачность» элемента.

Например:

.image
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

Итак, в вашем случае это должно выглядеть примерно так:

<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

Однако не забывайте, что этот тег не поддерживается в HTML5.

Вам тоже следует использовать CSS :)

MajuiF
источник
5

А как насчет opacityатрибута css ? 0к 1ценностям.

Но тогда вам, вероятно, потребуется использовать более явный элемент dom, чем «font». Например:

<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>

В качестве дополнительной информации я, конечно, предлагаю вам использовать объявления CSS вне ваших элементов html, но также попробуйте использовать стиль шрифта css вместо тега шрифта html.

Для кроссбраузерного генератора стилей css3 посмотрите http://css3please.com/

Себас
источник
3

Легко! после вашего:

    <font color=\"black\" face=\"arial\" size=\"4\">

добавьте это: 

    <font style="opacity:.6">

вам просто нужно изменить ".6" на десятичное число от 1 до 0

user3067297
источник
3

Не существует свойства CSS, такого как background-opacity, которое можно использовать только для изменения непрозрачности или прозрачности фона элемента, не затрагивая дочерние элементы, с другой стороны, если вы попытаетесь использовать свойство opacity CSS, оно не только изменит непрозрачность фона, но также изменяет непрозрачность всех дочерних элементов. В такой ситуации вы можете использовать цвет RGBA, введенный в CSS3, который включает альфа-прозрачность как часть значения цвета. Используя цвет RGBA, вы можете установить цвет фона, а также его прозрачность.

Я на
источник