Jak zmienić przezroczystość tekstu w HTML / CSS?

112

Jestem bardzo nowy w HTML / CSS i próbuję wyświetlić tekst jako przezroczysty w 50%. Do tej pory mam HTML do wyświetlania tekstu z pełnym kryciem

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

Nie jestem jednak pewien, jak zmienić jego krycie. Próbowałem poszukać w Internecie, ale nie wiem dokładnie, co zrobić z kodem, który znajdę.

html css opacity Nosrettap
źródło

Odpowiedzi:

268

opacitydotyczy całego elementu, więc jeśli masz tło, obramowanie lub inne efekty na tym elemencie, one również staną się przezroczyste. Jeśli tylko chcesz, aby tekst przejrzyste, użycie rgba.

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

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

Poza tym trzymaj się daleko, daleko od <font>. Mamy teraz do tego CSS.

Mattias Buelens
źródło
8
Znacznie lepsze rozwiązanie w porównaniu do przyjętej odpowiedzi, IMO. Nie musisz dodawać dodatkowego elementu span do kodu HTML, aby zastosować krycie wyłącznie do tekstu.
kinsho,
To jest rozwiązanie.
GhitaB
jakie przeglądarki są „stare” w tym sensie?
Rick Davies
1
@RickDavies Zgodnie z caniuse.com wymagany jest IE9 lub nowszy. Jeśli potrzebujesz obsługi IE8, nadal potrzebujesz rozwiązania awaryjnego. W przeciwnym razie wystarczy rgba.
Mattias Buelens
Hmmmm, nie jest to również właściwość krycia. Łał.
trusktr
105

Sprawdź krycie , możesz ustawić tę właściwość css na div, <p>lub używając <span>chcesz, aby były przezroczyste

Nawiasem mówiąc, znacznik czcionki jest przestarzały , użyj CSS, aby stylizować tekst

div {
    opacity: 0.5;
}

Edycja: ten kod sprawi, że cały element będzie przezroczysty, jeśli chcesz, aby ** tylko tekst ** był przezroczysty, sprawdź odpowiedź @Mattias Buelens

Mario Corchero
źródło
16
Użyj <span>, Luke!
pilau
20
Ta odpowiedź jest nieprawidłowa. Jego kod sprawia, że ​​cały element (div) jest przezroczysty. Pytanie zawierało tylko tekst. Odpowiedź rodzeństwa z wyższą liczbą głosów powinna zostać zaakceptowana.
Basil Bourque
Dziękuję Ci. Naprawdę pomogło mi to ukryć tekst w moim szablonie WordPress. Zamiast (krycie: 0.5;) właśnie użyłem (krycie: 0;).
Marcielli Oliveira
17

Po prostu użyj rgbatagu jako koloru tekstu. Możesz użyć opacity, ale wpłynęłoby to na cały element, a nie tylko na tekst. Powiedzmy, że masz obramowanie, które sprawi, że również będzie przezroczyste.

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
Harry Escott
źródło
9

Najlepszym rozwiązaniem jest przyjrzenie się znacznikowi „krycie” elementu.

Na przykład:

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

Więc w twoim przypadku powinno to wyglądać mniej więcej tak:

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

Pamiętaj jednak, że tag nie jest obsługiwany w HTML5.

Powinieneś też użyć CSS :)

MajuiF
źródło
5

A co z opacityatrybutem css ? 0do 1wartości.

Ale wtedy prawdopodobnie będziesz musiał użyć bardziej wyraźnego elementu dom niż „font”. Na przykład:

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

Jako dodatkowe informacje sugerowałbym oczywiście używanie deklaracji CSS poza elementami html, ale również spróbuj użyć stylu czcionki css zamiast znacznika html czcionki.

Aby uzyskać informacje o generatorze stylów CSS3 dla różnych przeglądarek, zajrzyj na stronę http://css3please.com/

Sebas
źródło
3

Łatwo! po twoim:

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

dodaj ten: 

    <font style="opacity:.6">

wystarczy zmienić „.6” dla liczby dziesiętnej z zakresu od 1 do 0

user3067297
źródło
3

Nie ma właściwości CSS, takiej jak krycie tła, której można używać tylko do zmiany krycia lub przezroczystości tła elementu bez wpływu na elementy potomne, z drugiej strony, jeśli spróbujesz użyć właściwości krycia CSS, nie tylko zmieni to krycie tła, ale zmienia także krycie wszystkich elementów potomnych. W takiej sytuacji możesz użyć koloru RGBA wprowadzonego w CSS3, który zawiera przezroczystość alfa jako część wartości koloru. Za pomocą koloru RGBA możesz ustawić kolor tła, a także jego przezroczystość.

Jestem na
źródło
2

spróbuj się bawić mix-blend-mode: multiply;

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

MDN

instruktaż

Dmitry Grinko
źródło