Criando imagens transparentes com CSS é fácil.
O CSS opacity propriedade é uma parte da recomendação CSS3.
Exemplo 1 - A criação de uma imagem transparente
A propriedade CSS3 de transparência é opacity .
Primeiro vamos mostrar-lhe como criar uma imagem transparente com CSS.
imagem normal:
A mesma imagem com a transparência:
Olhe para o seguinte CSS:
Exemplo
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Tente você mesmo " A opacity propriedade pode ter um valor de 0,0-1,0. O valor mais baixo, o mais transparente.
IE8 e uso anterior filter:alpha(opacity=x) . O x pode tomar um valor de 0 - 100. Um valor mais baixo torna o elemento mais transparente.
Exemplo 2 - Transparência Imagem - Passe Effect
Passe o mouse sobre as imagens:
A CSS tem esta aparência:
Exemplo
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Tente você mesmo " O primeiro bloco CSS é semelhante ao código no Exemplo 1. Além disso, nós adicionamos o que deve acontecer quando um usuário passa o mouse sobre uma das imagens. Neste caso, queremos que a imagem não ser transparente quando o usuário passa sobre ele. O CSS para isso é opacity:1; .
Quando o ponteiro do mouse se afasta da imagem, a imagem será transparente novamente.
Exemplo 3 - Texto em caixa transparente
Este é um texto que é colocado na caixa transparente.
O código-fonte se parece com isso:
Exemplo
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
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>
Tente você mesmo " Primeiro, criamos um <div> elemento (class="background") uma imagem de fundo e uma borda. Em seguida, criar outro <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> , podemos adicionar algum texto dentro de um <p> elemento.