Como alterar a transparência do texto em HTML / CSS?

112

Sou muito novo em HTML / CSS e estou tentando exibir algum texto como 50% transparente. Até agora eu tenho o HTML para exibir o texto com opacidade total

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

No entanto, não tenho certeza de como alterar sua opacidade. Tentei procurar online, mas não tenho certeza do que fazer exatamente com o código que encontro.

html css opacity Nosrettap
fonte

Respostas:

267

opacityse aplica a todo o elemento, portanto, se você tiver um fundo, borda ou outros efeitos naquele elemento, eles também se tornarão transparentes. Se você quiser apenas que o texto seja transparente, use rgba.

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

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

Além disso, fique longe, muito longe <font>. Temos CSS para isso agora.

Mattias Buelens
fonte
8
Uma solução muito superior em comparação com a resposta aceita, IMO. Você não precisa adicionar um elemento span adicional ao HTML para aplicar opacidade somente ao texto.
kinsho
Esta é a solução.
GhitaB
quais navegadores são "antigos" neste sentido?
Rick Davies
1
@RickDavies De acordo com caniuse.com , o IE9 ou superior é necessário. Se você precisar oferecer suporte ao IE8, ainda precisará do fallback. Caso contrário, você deve ficar bem com apenas rgba.
Mattias Buelens
Hmmmm, nem é a propriedade de opacidade. Uau.
trusktr
105

Verifique a opacidade , você pode definir esta propriedade css para o div, <p>ou usando <span>você deseja tornar transparente

E, a propósito, a tag de fonte está obsoleta , use css para estilizar o texto

div {
    opacity: 0.5;
}

Editar: Este código tornará todo o elemento transparente, se você quiser fazer ** apenas o texto ** transparente, marque a resposta @Mattias Buelens

Mario corchero
fonte
16
Use o <span> Luke!
pilau
20
Esta resposta está incorreta. Seu código torna todo o elemento (div) translúcido. A pergunta especificava apenas o texto. A resposta do irmão com maior votação deve ser a aceita.
Basil Bourque
Obrigado. Isso realmente me ajudou a esconder um texto no meu modelo wordpress. Em vez de (opacidade: 0,5;), acabei de usar (opacidade: 0;).
Marcielli Oliveira
17

Basta usar a rgbatag como a cor do texto. Você poderia usar opacity, mas isso afetaria todo o elemento, não apenas o texto. Digamos que você tenha uma borda, isso também a tornaria transparente.

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

Sua melhor solução é olhar para a tag "opacidade" de um elemento.

Por exemplo:

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

Portanto, no seu caso, deve ser algo como:

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

No entanto, não se esqueça de que a tag não é compatível com HTML5.

Você também deve usar um CSS :)

MajuiF
fonte
5

E quanto ao opacityatributo css ? 0aos 1valores.

Mas então você provavelmente precisará usar um elemento dom mais explícito do que "fonte". Por exemplo:

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

Como uma informação adicional, eu sugiro que você use declarações CSS fora de seus elementos html, mas também tente usar o estilo css da fonte em vez da tag html da fonte.

Para gerador de estilos css3 para vários navegadores, dê uma olhada em http://css3please.com/

Sebas
fonte
3

Fácil! depois do seu:

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

adicione este: 

    <font style="opacity:.6">

você só precisa trocar o ".6" por um número decimal entre 1 e 0

user3067297
fonte
3

Não há propriedade CSS como a opacidade do fundo que você pode usar apenas para alterar a opacidade ou transparência do fundo de um elemento sem afetar os elementos filho, por outro lado, se você tentar usar a propriedade de opacidade do CSS, ela não mudará apenas o opacidade do plano de fundo, mas também altera a opacidade de todos os elementos filhos. Em tal situação, você pode usar a cor RGBA introduzida no CSS3 que inclui transparência alfa como parte do valor da cor. Usando a cor RGBA, você pode definir a cor de fundo, bem como sua transparência.

Estou dentro
fonte
2

tente brincar com mix-blend-mode: multiply;

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

MDN

tutorial

Dmitry Grinko
fonte