Я очень новичок в HTML / CSS, и я пытаюсь отобразить какой-то текст как 50% прозрачный. Пока у меня есть HTML для отображения текста с полной непрозрачностью
<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>Однако я не знаю, как изменить его непрозрачность. Я пробовал поискать в Интернете, но не совсем уверен, что делать с найденным кодом.
Ответы:
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.
rgba.
Проверьте непрозрачность , вы можете установить для этого свойства css значение div, <p>или using, которое <span>вы хотите сделать прозрачным
И, кстати, тег шрифта устарел , используйте CSS для стилизации текста
div {
opacity: 0.5;
}
Изменить: этот код сделает весь элемент прозрачным, если вы хотите сделать ** только текст ** прозрачной проверкой @Mattias Buelens answer
Просто используйте rgbaтег в качестве цвета текста. Вы можете использовать opacity, но это повлияет на весь элемент, а не только на текст. Допустим, у вас есть граница, она также станет прозрачной.
.text
{
font-family: Garamond, serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}
Лучшее решение - посмотреть на тег «непрозрачность» элемента.
Например:
.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 :)
А как насчет 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/
Легко! после вашего:
<font color=\"black\" face=\"arial\" size=\"4\">добавьте это:
<font style="opacity:.6"> вам просто нужно изменить ".6" на десятичное число от 1 до 0
Не существует свойства CSS, такого как background-opacity, которое можно использовать только для изменения непрозрачности или прозрачности фона элемента, не затрагивая дочерние элементы, с другой стороны, если вы попытаетесь использовать свойство opacity CSS, оно не только изменит непрозрачность фона, но также изменяет непрозрачность всех дочерних элементов. В такой ситуации вы можете использовать цвет RGBA, введенный в CSS3, который включает альфа-прозрачность как часть значения цвета. Используя цвет RGBA, вы можете установить цвет фона, а также его прозрачность.
попробуйте поиграть с mix-blend-mode: multiply;
color: white;
background: black;
mix-blend-mode: multiply;