CSS Opacidade transparência
A opacitypropriedade
especifica a opacidade/transparência de um elemento.
Imagem
Transparente
A opacitypropriedade pode
assumir um valor de 0,0 a 1,0. Quanto menor o valor, mais transparente:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Transparência da imagem</h1>
<p>A propriedade opacity especifica a transparência
de um elemento. Quanto menor o valor, mais transparente:</p>
<p>Imagem com 50% de opacidade:</p>
<img src="img_forest.jpg"
alt="Forest" width="170" height="100">
</body>
</html>
Efeito
de foco transparente
A opacity propriedade é
frequentemente usada junto com o :hover seletor para alterar a opacidade ao
passar o mouse:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Transparência da imagem</h1>
<p>A propriedade opacity é frequentemente usada junto
com o seletor :hover para alterar a opacidade ao passar o mouse:</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>
efeito de foco invertido:
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Transparência da imagem</h1>
<p>A propriedade opacity é frequentemente usada junto
com o seletor :hover para alterar a opacidade ao passar o mouse:</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 opacity propriedade para
adicionar transparência ao plano de fundo de um elemento, todos os seus
elementos filhos herdam a mesma transparência. Isso pode dificultar a
leitura do texto dentro de um elemento totalmente transparente:
<!DOCTYPE
html>
<html>
<head>
<style>
div
{
background-color: #4CAF50;
padding: 10px;
}
div.first
{
opacity: 0.1;
}
div.second
{
opacity: 0.3;
}
div.third
{
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Caixa
Transparente</h1>
<p>Ao
usar a propriedade opacity para adicionar transparência ao plano de fundo de um
elemento, todos os seus elementos filhos também se tornam transparentes. Isso
pode dificultar a leitura do texto dentro de um elemento totalmente
transparente:</p>
<div
class="first"><p>opacidade
0.1</p></div>
<div
class="second"><p>opacidade
0.3</p></div>
<div
class="third"><p>opacidade
0.6</p></div>
<div><p>opacidade 1 (padrão)</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:
<!DOCTYPE
html>
<html>
<head>
<style>
div
{
background: rgb(76, 175, 80);
padding: 10px;
}
div.first
{
background: rgba(76, 175, 80, 0.1);
}
div.second
{
background: rgba(76, 175, 80, 0.3);
}
div.third
{
background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>
<h1>Caixa
Transparente</h1>
<p>Com
opacidade:</p>
<div
style="opacity:0.1;"><p>10% opacidade</p></div>
<div
style="opacity:0.3;"><p>30% opacidade</p></div>
<div
style="opacity:0.6;"><p>60% opacidade</p></div>
<div><p>opacidade1</p></div>
<p>Com
valores de cores RGBA:</p>
<div
class="first"><p>10% opacidade</p></div>
<div
class="second"><p>30% opacidade</p></div>
<div
class="third"><p>60% opacidade</p></div>
<div><p>padrão</p></div>
<p>Observe
como o texto fica transparente e também a cor de fundo ao usar a propriedade
opacity.</p>
</body>
</html>
Texto em caixa transparente
<!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>Este é algum texto colocado na
caixa transparente.</p>
</div>
</div>
</body>
</html>