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.
Respostas:
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.
rgba.
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
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);
}
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 :)
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/
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
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.
tente brincar com mix-blend-mode: multiply;
color: white;
background: black;
mix-blend-mode: multiply;