Wie ändere ich die Texttransparenz in HTML / CSS?

111

Ich bin sehr neu in HTML / CSS und versuche, Text als zu 50% transparent anzuzeigen. Bisher habe ich den HTML-Code, 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 die Deckkraft ändern soll. Ich habe versucht, online zu suchen, bin mir aber nicht sicher, was ich mit dem gefundenen Code tun soll.

html css opacity Nosrettap
quelle

Antworten:

267

opacityDies gilt für das gesamte Element. Wenn Sie also einen Hintergrund, einen Rahmen oder andere Auswirkungen auf dieses Element haben, werden diese ebenfalls transparent. Wenn Sie nur den Text wollen transparent sein, verwenden rgba.

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

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

Lenken Sie auch weit weg von <font>. Dafür haben wir jetzt CSS.

Mattias Buelens
quelle
8
Eine weit überlegene Lösung im Vergleich zur akzeptierten Antwort IMO. Sie müssen dem HTML kein zusätzliches span-Element hinzufügen, um die Deckkraft ausschließlich auf den Text anzuwenden.
Kinsho
Das ist die Lösung.
GhitaB
Welche Browser sind in diesem Sinne "alt"?
Rick Davies
1
@ RickDavies Laut caniuse.com ist IE9 oder höher erforderlich. Wenn Sie IE8 unterstützen müssen, benötigen Sie immer noch den Fallback. Ansonsten sollte es dir gut gehen rgba.
Mattias Buelens
Hmmmm, auch die Opazitätseigenschaft ist nicht. Beeindruckend.
trusktr
104

Deckkraft prüfen , Sie können diese CSS-Eigenschaft auf div, the <p>oder using setzen<span> Sie transparent machen möchten

Übrigens ist das Schriftart-Tag veraltet . Verwenden Sie CSS, um den Text zu formatieren

div {
    opacity: 0.5;
}

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

Mario Corchero
quelle
16
Benutze den <span>, Luke!
Pilau
20
Diese Antwort ist falsch. Sein Code macht das gesamte Element (div) durchscheinend. In der Frage wurde nur der Text angegeben. Die Antwort der Geschwister mit den höheren Stimmen sollte die akzeptierte sein.
Basil Bourque
Danke dir. Es hat mir wirklich geholfen, einen Text in meiner WordPress-Vorlage zu verstecken. Anstelle von (Deckkraft: 0,5;) habe ich gerade (Deckkraft: 0;) verwendet.
Marcielli Oliveira
17

Verwenden Sie einfach das rgbaTag als Textfarbe. Sie könnten verwenden opacity, aber das würde das gesamte Element betreffen, nicht nur den Text. Angenommen, Sie haben eine Grenze, dies würde auch diese transparent machen.

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

Ihre beste Lösung besteht darin, das Tag "Deckkraft" eines Elements zu betrachten.

Beispielsweise:

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

In Ihrem Fall sollte es also 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 :)

MajuiF
quelle
5

Was ist mit dem CSS- opacityAttribut? 0zu 1Werten.

Aber 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, aber auch versuchen, den CSS-Stil der Schriftart anstelle des HTML-Tags der Schriftart zu verwenden.

Informationen zum browserübergreifenden Generator für CSS3-Stile finden Sie unter http://css3please.com/.

Sebas
quelle
3

Einfach! nach ihrem:

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

füge dieses hinzu: 

    <font style="opacity:.6">

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

user3067297
quelle
3

Es gibt keine CSS- Eigenschaft wie die Hintergrundopazität, die Sie nur zum Ändern der Deckkraft oder Transparenz des Hintergrunds eines Elements verwenden können, ohne die untergeordneten Elemente zu beeinflussen. Wenn Sie jedoch versuchen, die CSS-Opazitätseigenschaft zu verwenden, ändert sich nicht nur die Deckkraft des Hintergrunds, ändert aber 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 der RGBA-Farbe können Sie die Farbe des Hintergrunds sowie dessen Transparenz einstellen.

Imon
quelle
2

versuche herumzuspielen mix-blend-mode: multiply;

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

MDN

Lernprogramm

Dmitry Grinko
quelle