imagem CSS transparente / opaco
Usando CSS é fácil criar uma imagem transparente.
Nota: CSS opacidade propriedade faz parte das recomendações do W3C CSS3.
mais exemplos
Criar uma imagem transparente - pairar efeito
Criar uma caixa de texto tem uma imagem de fundo transparente
Exemplo 1 - Criar uma imagem transparente
Transparência na propriedade CSS3 éopacidade.
Em primeiro lugar, vamos mostrar-lhe como criar uma imagem transparente com CSS.
imagem normal
A mesma imagem com a transparência:
Considere o seguinte CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, o navegador Opera e Safari utiliza as propriedades de transparência da imagem pode tornar-se opaca. valor da propriedade opacidade 0,0-1,0. Valores menores fazem o elemento mais transparente.
IE8 e versões anteriores usar filtro: alfa (opacidade = x). X pode assumir valores 0-100. Os valores mais baixos fazem o elemento mais transparente.
Exemplo 2 - Transparência Imagem - pairar efeito
Passe o mouse sobre a imagem:
estilo CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
O primeiro bloco é o código CSS no Exemplo 1, e semelhantes. Além disso, nós também adicionamos o que acontece quando o usuário move o paira mouse sobre uma das imagens. Neste caso, quando o usuário move o mouse sobre a imagem, esperamos que a imagem é clara.
Este éCSS: opacidade = 1.
IE8 euso anterior: filter: alpha (opacity = 100 ).
Quando o ponteiro do mouse para longe da imagem, a imagem será re-transparência.
Exemplo 3 - texto caixa transparente
O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente. O texto na caixa transparente.
O código-fonte é a seguinte:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
Primeiro, criamos uma altura fixa e largura do elemento div uma imagem de fundo e fronteira com. Então vamos criar um div elementos menores dentro da primeira div. Este DIV também têm uma largura fixa, cor de fundo, fronteira - e é transparente. Dentro da div transparente, podemos adicionar algum texto dentro do elemento P.