Como criar imagens transparentes com CSS ?
Pietro Gaião | maio 24th, 2010 | CSS | 3 Comments »
Vamos ver como podemos criar imagens transparentes com CSS.
Fiz uns testes, esse CSS funciona em todos os navegadores.
Veja um exemplo de como ficarão as imagens:
Imagem original:
Imagem com transparência:
Olhe como ficou o código fonte:
<img src="brasil.jpg" width="150" height="113" alt="brasil" style="opacity:0.4;filter:alpha(opacity=40)" />
opacity:x de transparência, enquanto usa o IE filter:alpha(opacity=x).
No Firefox (opacity:x) x pode ser um valor 0.0 – 1.0. Um valor mais baixo faz com que o elemento fique mais transparente.
No IE (alpha(opacity=x)) x pode ser um valor de 0 – 100. Um valor mais baixo faz com que o elemento fique mais transparente.
Como colocar texto em uma caixa transparente com CSS
O código-fonte fica assim:
<html>
<head>
<style type="text/css">
.background{
width: 500px;
height: 250px;
background: url(http://www.pietrogaiao.com.br/blog/wp-content/uploads/2010/05/brasil.jpg) left top;
border: 2px #000 solid;
}
.transbox{
width: 400px;
height: 150px;
margin:30px;
padding:10px;
background-color: #ffffff;
border: 1px #000 solid;
opacity:0.7;
filter:alpha(opacity=70)
}
p div.transbox{
margin: 40px 30px;
font-weight: bold;
color: # 000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
Este e um texto que e colocado na caixa transparente.
Este e um texto que e colocado na caixa transparente.
Este e um texto que e colocado na caixa transparente.
Este e um texto que e colocado na caixa transparente.
Este e um texto que e colocado na caixa transparente.
Este e um texto que e colocado na caixa transparente.
</div>
</div>
</body>
</html>
Primeiro, criamos um elemento div (class = “background”), com uma altura e largura fixa, uma imagem de fundo, e uma borda. Então vamos criar um pequeno div (class = Transbox “) dentro do elemento div primeiro. Isso também tem um div com largura fixa, um fundo imagem e uma borda.
Dentro da div transparente, adicionaremos algum texto dentro.
Popularity: 24% [?]
muito bom o efeito, adorei.
Mas não consigo fazer funcionar, copiei o código para o DreamWeaver e mesmo assim, não funciona(fiz todos os ajustes antes claro), mas o box não aparece esmaecido.
oque pode ser?
vc é fera… o IE é muito ruim…. tudo tem que fazer diferente….
estou usando curvycorners e meu select do meu formulario não fica com os cantos arredondados no IE
só no chome e firefox…
no IE ele some
kkk
mas esse artigo ajudou muito
se souber como posso resolver agradeço..
e´ orrivel
nao consigo faser
issso nao existe