webentwicklung-frage-antwort-db.com.de

Wie kann man die Transparenz von Text in HTML/CSS ändern?

Ich bin sehr neu in HTML/CSS und versuche, Text als 50% transparent darzustellen. Bisher habe ich das HTML, um den Text mit voller Deckkraft anzuzeigen

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

Ich bin mir jedoch nicht sicher, wie ich seine Deckkraft ändern kann. Ich habe versucht, online zu suchen, aber ich weiß nicht genau, was ich mit dem Code tun soll, den ich finde.

htmlcssopacity
83
Nosrettap

Check Opacity , Sie können diese CSS-Eigenschaft auf div, <p> oder mit <span> setzen, die Sie transparent machen möchten

Das font-Tag ist übrigens veraltet , verwenden Sie css, um den Text zu gestalten

div {
    opacity: 0.5;
}

Bearbeiten: Dieser Code macht das gesamte Element transparent, wenn Sie ** nur den transparenten Text ** überprüfen möchten, und überprüfen Sie die Antwort von @Mattias Buelens

84
Mario Corchero

opacity gilt für das gesamte Element. Wenn Sie also einen Hintergrund, einen Rand oder andere Auswirkungen auf dieses Element haben, werden diese ebenfalls transparent. Wenn Sie only möchten, dass der Text transparent ist, verwenden Sie rgba.

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

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

Steuern Sie auch weit weg von <font>. Wir haben jetzt CSS dafür.

223
Mattias Buelens

Verwenden Sie einfach das Tag rgba als Textfarbe. Sie könnten opacity verwenden, aber das würde sich auf das gesamte Element auswirken, nicht nur auf den Text. Angenommen, Sie haben eine Grenze, die würde auch transparent werden. 

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

Die beste Lösung ist, sich das Tag "Opacity" eines Elements anzusehen.

Zum Beispiel:

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

In Ihrem Fall sollte es ungefähr so ​​aussehen:

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

Vergessen Sie jedoch nicht, dass das Tag in HTML5 nicht unterstützt wird.

Sie sollten auch ein CSS verwenden :)

9
MajuiF

Was ist mit dem Attribut css opacity? 0 bis 1 Werte.

Dann müssen Sie wahrscheinlich ein expliziteres dom-Element als "font" verwenden. Zum Beispiel:

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

Als zusätzliche Information würde ich natürlich vorschlagen, dass Sie CSS-Deklarationen außerhalb Ihrer HTML-Elemente verwenden. Versuchen Sie jedoch auch, den Schriftartenstil css anstelle des Schriftarten-HTML-Tags zu verwenden.

Für den Cross-Browser-css3-Styles-Generator schauen Sie unter http://css3please.com/ nach.

3
Sebas

Einfach! nach ihrem:

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

füge diese hinzu: 

    <font style="opacity:.6">

sie müssen lediglich die ".6" für eine Dezimalzahl zwischen 1 und 0 ändern

3
user3067297

Es gibt keine CSS -Eigenschaft wie Hintergrunddeckkraft, die Sie nur zum Ändern der Deckkraft oder Transparenz des Hintergrunds eines Elements verwenden können, ohne die untergeordneten Elemente zu beeinflussen. Wenn Sie dagegen versuchen, die CSS-Deckkraft-Eigenschaft zu verwenden Dadurch wird nicht nur die Deckkraft des Hintergrunds geändert, sondern auch die Deckkraft aller untergeordneten Elemente. In einer solchen Situation können Sie die in CSS3 eingeführte RGBA-Farbe verwenden, die Alpha-Transparenz als Teil des Farbwerts enthält. Mit RGBA-Farbe können Sie die Farbe des Hintergrunds sowie dessen Transparenz einstellen.

2
Imon

versuche mit mix-blend-mode: multiply; herumzuspielen

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

MDN

Tutorial

1
Dmitry Grinko