Opacidade/transparência da imagem CSS
Índice
A propriedade opacity especifica a opacidade/transparência de um elemento.
Imagem Transparente
A propriedade opacity pode assumir um valor de 0,0 a 1,0. Quanto menor o valor, mais transparente:
opacity 0.2
opacity 0.5
opacity 1
(default)
Exemplo
img {
opacity: 0.5;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>
<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
</body>
</html>
Efeito de foco transparente
A propriedade opacity é frequentemente usada junto com o seletor :hover para alterar a opacidade ao passar o mouse:
Exemplo
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Exemplo explicado
O primeiro bloco CSS é semelhante ao código do Exemplo 1. Além disso, adicionamos o que deve acontecer quando um usuário passa o mouse sobre uma das imagens. Neste caso queremos que a imagem NÃO fique transparente quando o usuário passar o mouse sobre ela. O CSS para isso é opacity:1;.
Quando o ponteiro do mouse se afastar da imagem, a imagem ficará transparente novamente.
Um exemplo de efeito de foco invertido:
Exemplo
img:hover {
opacity: 0.5;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Caixa Transparente
Ao usar a propriedade opacity para adicionar transparência ao plano de fundo de um elemento, todos os seus elementos filhos herdar a mesma transparência. Isso pode dificultar a leitura do texto dentro de um elemento totalmente transparente:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Exemplo
div {
opacity: 0.3;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #04AA6D;
padding: 10px;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>
Transparência usando RGBA
Se você não quiser aplicar opacidade aos elementos filhos, como no exemplo acima, use valores de cores RGBA. O exemplo a seguir define a opacidade da cor de fundo e não do texto:
100% opacity
60% opacity
30% opacity
10% opacity
Você aprendeu em nosso capítulo Cores CSS que pode usar RGB como valor de cor. Além do RGB, você pode usar um valor de cor RGB com um canal alfa (RGBA) - que especifica a opacidade de uma cor.
Um valor de cor RGBA é especificado com: rgba(red, green, blue, alpha). O O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
Dica: você aprenderá mais sobre cores RGBA em nosso capítulo Cores CSS.
Exemplo
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30%
opacity */
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(4, 170, 109);
padding: 10px;
}
div.first {
background: rgba(4, 170, 109, 0.1);
}
div.second {
background: rgba(4, 170, 109, 0.3);
}
div.third {
background: rgba(4, 170, 109, 0.6);
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
<p>Notice how the text gets transparent as well as the background color when using the opacity property.</p>
</body>
</html>
Texto em caixa transparente
This is some text that is placed in the transparent box.
Exemplo
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Exemplo explicado
Primeiro, criamos um elemento <div> (class="background") com uma imagem de fundo e uma borda.
Depois criamos outra <div> (class="transbox") dentro da primeira <div>.
O <div class="transbox"> tem uma cor de fundo e uma borda - a div é transparente.
Dentro do transparente <div>, adicionamos algum texto dentro de um elemento <p>.