Vamos falar sobre o uso avançado de atributos RGBA que são amplamente utilizados atualmente em CSS3. A questão de compatibilidade deste atributo é relativamente simples. O IE8 já oferece suporte a esse atributo, e o IE6 e o IE7 também podem suportá-lo por meio de hacks. RGBA é semelhante ao atributo RBG em CSS2, exceto que o atributo RGBA possui uma definição adicional de transparência. A explicação do atributo RGBA no padrão CSS3 é a seguinte:
| /*Sintaxe básica*/ em { cor : Rgba ( vermelho , verde , azul , opacidade ) } /* Exemplo*/ em { cor : rgba ( 255 , 0 , 0 , 1 ) } /* vermelho, opaco */ em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* Igual ao anterior*/ |
Na realidade, usar três valores decimais de 1 a 255 para definir uma cor é mais preciso do que usar porcentagens. A seguir estão os valores RGB de várias cores. de 00 a FF em Decimal servirá.
O poder do RGBA é que mais cores podem ser apresentadas através da definição de transparência e da mistura de cores em diferentes camadas, assim como a mistura de tintas. Por exemplo, primeiro definimos uma imagem de fundo para a página e depois definimos uma cor para o conteúdo em H1 da página, por exemplo:
|
h1 { cor : rgb ( 0 , 0 , 0 ) ; cor de fundo : rgb ( 255 , 255 , 255 ) ; } |
Mas qual será o efeito se eu não definir uma transparência geral (atributo de opacidade) em H1?
|
h1 { cor : rgb ( 0 , 0 , 0 ) ; cor de fundo : rgb ( 255 , 255 , 255 ) ; opacidade : 0,5 ; } |
O efeito que vemos aqui é que todo o H1 incluindo o texto é 50% transparente. No entanto, a transparência do texto afeta a leitura. Vamos tentar usar o atributo RGBA para definir a cor de fundo de H1 separadamente.
|
h1 { cor : rgb ( 0 , 0 , 0 ) ; cor de fundo : rgba ( 255 , 255 , 255 , 0,5 ) ; } |
h1 { |
RGBA pode ser usado sempre que uma cor precisar ser definida, por exemplo:
| div { cor : rgb ( 0 , 0 , 0 ) ; cor de fundo : rgb ( 255 , 255 , 255 ) ; borda : 10px RGB sólido ( 255 , 255 , 255 , 0,3 ) ; } |
Defina a transparência para 30% e uma borda branca sólida com largura de linha de 10px para todos os divs.
| div { cor : rgba ( 255 , 255 , 255 , 0,8 ) ; cor de fundo : rgba ( 142 , 213 , 87 , 0,3 ) ; } div :hover { cor : rgba ( 255 , 255 , 255 , 1 ) ; cor de fundo : rgba ( 142 , 213 , 87 , 0,6 ) ; } |
Passe o mouse para alterar a transparência.
Além disso, se combinados com JavaScript, os atributos RGBA podem criar efeitos mais deslumbrantes.
Mude seus hábitos de escrita CSS
Nos exemplos acima você pode ver que o autor tem usado rgb() para especificar cores em vez de usar a tradicional forma #xxx de representação hexadecimal. Este é um método de escrita preparado para o atributo RGBA do CSS3. Usar rgb() para especificar uma cor pode ser entendido como rgba() sendo opaco, mas a diferença entre os dois é muito pequena, o que trará grande comodidade na atualização para rgba. () no futuro.
Compatível com todos os navegadores
Embora as versões mais recentes dos navegadores convencionais já suportem atributos RGBA, devemos também tomar cuidado com os usuários que usam navegadores mais antigos, para que em alguns lugares estaremos mais seguros usando o método antigo. Existem vários métodos e cada um pode escolher de acordo com sua necessidade.
Embora isso afete o efeito em navegadores de versões inferiores, este é o método mais simples e mais seguro. As operações específicas são as seguintes:
| h1 {. cor : rgb ( 127 , 127 , 127 ) ; cor : rgba ( 0 , 0 , 0 , 0,5 ) ; } |
Defina a cor rgb primeiro e depois defina a cor rgba, de modo que os navegadores que não suportam o atributo rgba exibirão apenas a cor rgb, enquanto os navegadores que suportam rgba exibirão a cor rgba devido à redefinição.
A vantagem do formato PNG é que o recurso de transparência na imagem pode ser exibido na página da web.
| h1 { plano de fundo : url transparente ( black50.png ) ; plano de fundo : rgba ( 0 , 0 , 0 , 0,5 ) nenhum ; } |
O mesmo efeito do rgba é obtido através de um fundo PNG com transparência de 50%.
pode usar os atributos privados do IE para resolver o IE6 e o IE7, que podem obter alguns dos mesmos efeitos que o rgba.
| h1 { filtro :progid :DXImageTransform.Microsoft.Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ; } |
Link original: Uso avançado de atributos CSS3 RGBA
Obrigado ao bolo por sua contribuição.