Exemplo
Definir o nível de opacidade para um <div> elemento:
div
{
opacity: 0.5;
}
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade Opacidade ajusta o nível de opacidade para um elemento.
O nível de opacidade descreve o nível de transparência, onde 1 não é transparente em tudo, 0,5 é de 50% see-through, e 0 é completamente transparente.
| Valor padrão: | 1 |
|---|---|
| Herdado: | no |
| Animatable: | yes, see individual properties . Read about animatable Try it |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.opacity="0.5" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9 | 2.0 | 3.1 | 9 |
Nota: IE8 e versões anteriores suporta uma alternativa, a propriedade filtro. Como: filter:Alpha(opacity=50) .
CSS Syntax
opacity:number|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| number | Especifica a opacidade. De 0,0 (fully transparent) a 1,0 (fully opaque) | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
mais Exemplos
Exemplo
Como usar JavaScript para alterar a opacidade de um elemento:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el
= document.getElementById("p1");
if (el.style.opacity
!== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
} Tente você mesmo " Páginas relacionadas
CSS tutorial: CSS Imagem Opacidade / Transparência
Referência HTML DOM: opacity property