O melhor tutorial imagem CSS transparente / opaco em 2024. Neste tutorial você pode aprender mais exemplos,Exemplo 1 - Criar uma imagem transparente,Exemplo 2 - Transparência Imagem - pairar efeito,Exemplo 3 - texto caixa transparente,
Usando CSS é fácil criar uma imagem transparente.
Nota: CSS opacidade propriedade faz parte das recomendações do W3C CSS3.
Criar uma imagem transparente - pairar efeito
Criar uma caixa de texto tem uma imagem de fundo 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:
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.
Passe o mouse sobre a imagem:
estilo CSS:
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.
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:
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.