From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/opacity/index.html | 212 +++++++++++++++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 files/pt-br/web/css/opacity/index.html (limited to 'files/pt-br/web/css/opacity/index.html') diff --git a/files/pt-br/web/css/opacity/index.html b/files/pt-br/web/css/opacity/index.html new file mode 100644 index 0000000000..41afe896ae --- /dev/null +++ b/files/pt-br/web/css/opacity/index.html @@ -0,0 +1,212 @@ +--- +title: opacity +slug: Web/CSS/opacity +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

Sumário

+ +

A propriedade CSS opacity especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.

+ +

O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.

+ +

Se você não quer aplicar a opacidade ao elemento filho - use isto:

+ +
background: rgba(0, 0, 0, 0.4);
+ +

Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo contexto de empilhamento.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Totalmente opaco */
+opacity: 1;
+opacity: 1.0;
+
+/* Translúcido */
+opacity: 0.6;
+
+/* Totalmente transparente */
+opacity: 0.0;
+opacity: 0;
+
+/* Valores globais */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+
+ +

Valores

+ +
+
<number>
+
É um {{cssxref("number")}} no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.
+
+ + + + + + + + + + + + + + + + + + + +
ValorSignificado
0O elemento é totalmente transparente (isto é, invisível).
Qualquer {{cssxref("number")}} entre 0 e 1O elemento é translúcido (isto é, o background é visível).
1O elemento é totalmente opaco (sólido).
+
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplos

+ +

Exemplo básico

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Mal consegue ver o texto acima do background */
+}
+.medium {
+  opacity: 0.5; /* Vê o texto mais claramente acima do background */
+}
+.heavy {
+  opacity: 0.9; /* Vê o texto muito claramente acima do background */
+}
+
+ +
<div class="light">Você mal vê isso.</div>
+<div class="medium">Isso é mais fácil de ver.</div>
+<div class="heavy">Isso é muito fácil de ver.</div>
+
+ +

{{EmbedLiveSample('Basic_example', '640', '64')}}

+ +

Opacidade diferente com :hover

+ +
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 e anteriores */
+  zoom: 1; /* Ativa "hasLayout" no IE 7 e anteriores */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity">
+
+
+ +

{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Define opacity como animável.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Definição inicial.
+ +

Compatibilidade com browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico1.0{{CompatGeckoDesktop("1.7")}}[1]9.0[2]
+ 8.0
+ 4.0		9.01.2 (125)[3]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico1.0{{CompatGeckoMobile("1.7")}}[1]9.0[2]
+ 8.0
+ 4.0		9.03.2
+
+ +

 

+ +

[1] Anterior ao Gecko 1.7 (Firefox 0.9) , a propriedade -moz-opacity foi implementada de uma maneira não-padronizada (herdada). Com o Firefox 0.9, o comportamento mudou e a propriedade foi renomeada para opacity. Desde então, -moz-opacity foi suportada somente como um alias para opacity.

+ +

Gecko 1.9.1 {{geckoRelease("1.9.1")}} e posteriores não suportam  -moz-opacity e o suporte para MozOpacity no JavaScript foi removido no Gecko 13 {{geckoRelease("13")}}. A partir de agora, você deve simplesmente usar opacity.

+ +

[2] Anterior à versão 9, Internet Explorer não suporta opacity, em vez disso ele suporta uma propriedade filter com alpha(opacity=xx) ou "alpha(opacity=xx)" como valor (ambas são sinônimos). Do IE4 até o IE9 foi suportado a forma extendida progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). IE8introduziu -ms-filter, a qual é sinônimo de filter. Ambas foram removidas no IE10.

+ +

[3] Similar à -moz-opacity, -khtml-opacity tem estado morta desde o início de 2004 (lançamento do Safari 1.2).
+ Konqueror nunca teve suporte para -khtml-opacity e tem suportado a propriedade opacity desde a versão 4.0.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf