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

85

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

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

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

Ваш Ответ

8   ответов
2

mix-blend-mode: multiply;

color: white;
background: black;
mix-blend-mode: multiply;

MDN

руководство

2

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

15

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

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
226

opacity применяется ко всему элементу, поэтому, если у вас есть фон, граница или другие эффекты для этого элемента, они также станут прозрачными. если тыonly хотите, чтобы текст был прозрачным, используйте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 для этого сейчас.

Error: User Rate Limit Exceededcaniuse.comError: User Rate Limit Exceededrgba.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
3

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

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

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

    <font style="opacity:.6"> 

Вам просто нужно изменить & quot; .6 & quot; для десятичного числа от 1 до 0

86

Проверьтепомутнение, Вы можете установить это свойство CSS в DIV,<p> или используя<span> Вы хотите сделать прозрачным

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

div {
    opacity: 0.5;
} 

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededsibling answerError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
3

Как насчет CSSopacity атрибут?0 в1 ценности.

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

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

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 тоже :)

Похожие вопросы