62 lines
1.7 KiB
Markdown
62 lines
1.7 KiB
Markdown
|
---
|
||
|
|
title: Background Opacity
|
||
|
|
localeTitle: Opacidade de fundo
|
||
|
|
---
|
||
|
|
## Opacidade de fundo
|
||
|
|
|
||
|
|
A propriedade opacidade especifica a opacidade / transparência de um elemento, ou seja, o grau em que o conteúdo por trás do elemento é visível.
|
||
|
|
|
||
|
|
A propriedade de opacidade pode levar um valor de 0,0 a 1,0. Quanto menor o valor, mais transparente:
|
||
|
|
|
||
|
|
Encontre mais detalhes [aqui](https://www.w3schools.com/css/css_image_transparency.asp)
|
||
|
|
|
||
|
|
Você pode escolher até que ponto deseja tornar o elemento transparente. Você precisa adicionar a seguinte propriedade CSS para obter os níveis de transparência.
|
||
|
|
|
||
|
|
**Totalmente opaco**
|
||
|
|
|
||
|
|
```css
|
||
|
|
.class-name {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
OR
|
||
|
|
|
||
|
|
.class-name {
|
||
|
|
opacity:1.0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
**Translúcido**
|
||
|
|
|
||
|
|
```css
|
||
|
|
.class-name {
|
||
|
|
opacity:0.5;
|
||
|
|
}
|
||
|
|
Opacity value can be anything between 0 and 1;
|
||
|
|
```
|
||
|
|
|
||
|
|
**Transparente**
|
||
|
|
|
||
|
|
```css
|
||
|
|
.class-name {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
OR
|
||
|
|
|
||
|
|
.class-name {
|
||
|
|
opacity:0.0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Alternativamente, você pode usar um valor rgba transparente como este: \`\` \`css
|
||
|
|
|
||
|
|
.nome da classe{ cor de fundo: rgba (0,0,0, 0,5); } \`\` \` O exemplo acima define o plano de fundo como preto com 50% de opacidade. O último valor de um valor rgba é o valor alfa. Um valor alfa de 1 é igual a 100% e 0,5 (0,5 para curto) é de 50%. Usamos esse método para adicionar transparência a um elemento sem afetar o conteúdo interno.
|
||
|
|
|
||
|
|
[Um exemplo codepen para mostrar intervalos de opacidade em segundo plano](https://codepen.io/lvcoulter/full/dVrwmK/)
|
||
|
|
|
||
|
|
#### Mais Informações:
|
||
|
|
|
||
|
|
Para mais informações, visite [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) [Propriedade CSS de Opacidade no CSS-Tricks](https://css-tricks.com/almanac/properties/o/opacity/)
|
||
|
|
|
||
|
|
Suporte do navegador: [caniuse](https://caniuse.com/#search=opacity)
|