Bom dia, geeks de desenvolvimento web, assim como seus novatos. Para quem não segue as tendências da área de TI, ou melhor, moda web, quero informar solenemente que esta publicação sobre o tema: “Como fazer um bloco transparente com ferramentas css” é o caminho certo para você. De fato, no atual 2016, a introdução de vários objetos transparentes em serviços online é considerada uma jogada elegante.
Portanto, neste artigo vou falar sobre todos os métodos existentes de criação de transparência, começando pelas soluções antediluvianas, vou me concentrar na compatibilidade de soluções com navegadores, e também dar exemplos específicos de código de programa. Agora mãos à obra!
Método 1. Antediluviano
Quando ainda havia computadores fracos e "habilidades" não foram desenvolvidas, os desenvolvedores criaram sua própria maneira de criar um fundo transparente: usando pixels transparentes por sua vez com os coloridos. Assim, o bloco criado parecia um tabuleiro de damas quando dimensionado, mas em seu tamanho normal parecia uma espécie de transparência.
Isso, na minha opinião, "muleta" é claro ajuda em versões antigas de navegadores, nas quais as soluções modernas não funcionam. Mas é importante notar que a qualidade da exibição do texto , inscrito em tal, cai abruptamente.
Método 2. Não confuso
Em casos raros, os desenvolvedores resolvem o problema com a introdução de uma imagem semitransparente inserindo ... uma imagem semitransparente pronta! Para isso, são utilizadas imagens salvas no formato PNG-24. Este formato gráfico permite definir 256 níveis de translucidez.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
No entanto, esse método não é conveniente por vários motivos:
- O Internet Explorer 6 não funciona com essa tecnologia, você precisa escrever um código de script para ele;
- Você não pode alterar as cores de fundo em css;
- Se a função de exibição de imagens estiver desabilitada no navegador, ela desaparecerá.
Método 3. Proprietário
A forma mais comum e conhecida de tornar um bloco transparente é a propriedade opacidade.
O valor do parâmetro varia no intervalo, onde em 0 o objeto é invisível e em 1 ele é exibido por completo. No entanto, existem alguns momentos desagradáveis aqui também.
Primeiro, todos os filhos herdam a transparência. Isso significa que o texto inscrito também "brilhará" junto com o fundo.
Em segundo lugar, o Internet Explorer novamente "torce o nariz" e até a versão 8 não funciona com opacidade.
Para resolver este problema, use filtro:alfa (Opacidade = valor).
Vejamos um exemplo.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Método 4. Moderno
Hoje, os profissionais usam a ferramenta rgba (r, g, b, a).
Antes eu disse que RGB é um dos modelos de cores populares, onde R é responsável por todos os tons de vermelho, G - tons de verde e B - tons de azul.
No caso do parâmetro css, a variável A é responsável pelo canal alfa, que por sua vez é responsável pela transparência.
A principal vantagem do último método é que o canal alfa não afeta os objetos dentro do bloco estilizado.
rgba (r, g, b, a) é compatível desde:
- 10 versões do Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 versões do Firefox.
Eu gostaria de apontar um fato interessante! O amado Internet Explorer 7 gera um erro ao combinar uma propriedade cor de fundo com o nome das cores (cor de fundo: ouro). Portanto, vale a pena usar apenas:
cor de fundo: rgba (255, 215, 0, 0,15)
Agora, um exemplo.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Você encontrará todos os tipos de flores em nossa loja.
|
Observe que o conteúdo do texto do bloco é totalmente visível (100% preto), enquanto o fundo está definido para um canal alfa de 0,88, ou seja, 88%.
Isso conclui a publicação. Inscreva-se no meu blog e não se esqueça de convidar seus amigos. Boa sorte aprendendo idiomas da web! Tchau tchau!
Descrição
Especifica a cor de fundo de um elemento. Embora essa propriedade não herde propriedades de seu pai, porque o valor inicial é definido como transparente, a cor de fundo dos filhos é igual à cor de fundo do pai.
Sintaxe
cor de fundo:<цвет>| transparente | herdar
Os valores
transparente Define o plano de fundo como transparente. herdar Herda o valor do pai.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Este exemplo usa três maneiras diferentes de definir a cor de fundo para elementos em uma página da web. O resultado do exemplo é mostrado na Fig. 1.
Arroz. 1. Aplicando cor de fundo
Modelo de Objeto
document.getElementById ("elementID") .style.backgroundColor
Navegadores
O Internet Explorer até e incluindo 7.0 não suporta o valor de herança.
Não há uma maneira direta de definir a transparência da imagem de fundo (pelo menos para 2016) por meio de CSS (incluindo CSS 3). Existem muitas soluções alternativas para esse problema.
Mistura de fundos
A solução mais simples é misturar dois fundos (uma imagem e uma cor semitransparente). Este método é adequado se houver o mesmo tipo de fundo sob a "imagem de fundo transparente". isso não é transparência de forma alguma, mas sua imitação ao misturar a imagem com a cor. Defina um fundo duplo consistindo em uma imagem de fundo e a cor desejada com um canal alfa. Depois disso, selecione o modo de mesclagem mais adequado e use o canal alfa da cor para ajustar a composição ao resultado desejado.
Plano de fundo: url ("/ images / img1.jpg"), rgba (255,255,255,0,9); modo de mesclagem de fundo: cor;
Adicionar um pseudo elemento
A melhor forma de conseguir o que deseja. Crie um pseudo-elemento usando a pseudo-classe posterior. Há
#main (position: relative;) #main: after (content: ""; display: block; position: absoluto; top: 0; left: 0; background-image: url (/ wp-content / uploads / 2010/11 /tandem.jpg); largura: 100%; altura: 100%; opacidade: 0,2; índice z: -1;)
Olá pessoal. Como você provavelmente sabe, background é uma propriedade css que permite definir uma cor de fundo ou carregar uma imagem para atuar como fundo. CSS3 também introduz a capacidade de criar gradientes lineares e radiais, mas esse é um tópico para um artigo separado. Neste eu também gostaria de dizer a você como definir a transparência para a propriedade background em css.
Definir transparência para o fundo css
Então, tudo isso é muito fácil graças ao formato de notação de cores rgba. Se você trabalha com editores gráficos, provavelmente sabe que o modo de cor rgb significa vermelho, verde e azul. Portanto, rgba é praticamente o mesmo, apenas mais um parâmetro é adicionado - transparência. Está escrito assim:
Cor de fundo: rgba (173, 57, 22, 0,5)
Primeiro, indicamos explicitamente que estamos configurando a cor no modo rgba. Em seguida, especificamos os valores de saturação das três cores primárias de 0 a 255, onde 255 é a saturação mais alta. O quarto parâmetro é nossa transparência. Um valor de 0 a um é escrito aqui. 1 é totalmente opaco e 0 é totalmente transparente. Da mesma forma, se você definir como 0, a cor de fundo não ficará visível.
Agora você sabe como definir a transparência para a propriedade de fundo em css. Para fazer isso, você precisa usar o modo de cores rgba. Existe também a propriedade opacity, mas se aplica a todo o elemento como um todo. Ou seja, quando a opacidade é aplicada, a transparência também pode ser aplicada ao texto, tornando-o ilegível.
Fundo transparente, por exemplo
As vantagens de um fundo translúcido são fáceis de mostrar com um exemplo. Por exemplo, temos um histórico geral para uma página. É assim que o bloco ficaria se recebesse uma cor preta sólida:
Agora vamos definir a mesma cor preta para o bloco, mas indicá-lo usando o formato de cor rgba, especificando o último valor em 0,7, por exemplo. Acontece assim:
Agora o fundo do bloco é visível através dele e você pode ver a imagem de fundo. Esta imagem e o fundo são apenas para fins ilustrativos. Como você pode imaginar, a transparência no plano de fundo css pode ser útil quando você precisa que o plano de fundo de um elemento aninhado apareça sem obscurecer outros planos de fundo localizados em outras camadas.
Não é difícil definir a própria cor usando rgba. Como já mencionado - as três primeiras letras significam três cores primárias: vermelho, verde e azul, ou melhor, a sua parte (de 0 a 255). Ao prescrever valores diferentes, você pode obter milhões de cores diferentes, e a translucidez permitirá que você crie muitos efeitos bonitos para o site, se necessário.
A propriedade opacity é usada para criar um efeito de transparência em CSS.
O IE8 e os navegadores anteriores oferecem suporte a uma propriedade alternativa - filtro: alfa (opacidade = x), onde "x" pode assumir um valor de 0 a 100; quanto menor o valor, mais transparente será o elemento.
Todos os outros navegadores suportam a propriedade de opacidade CSS padrão, que pode assumir como um valor números de 0,0 a 1,0. Quanto menor o valor, mais transparente será o elemento:
Experimentar "Transparência flutuante
A pseudo classe: hover permite que você altere a aparência dos elementos quando você passa o mouse sobre eles. Usaremos esta oportunidade para fazer a imagem perder sua transparência ao passar o mouse:
Experimentar "Transparência de fundo
Existem duas maneiras possíveis de tornar um elemento transparente: a propriedade opacity descrita acima e especificando a cor de fundo no formato RGBA.
Você já deve estar familiarizado com o modelo de representação de cores RGB. RGB (Vermelho, Verde, Azul - vermelho, verde, azul) - um sistema de cores que determina a tonalidade misturando as cores vermelha, verde e azul. Por exemplo, você pode usar qualquer uma das seguintes declarações para definir a cor do texto como amarelo:
Cor: rgb (255,255,0); cor: rgb (100%, 100%, 0);
As cores especificadas com RGB serão diferentes dos valores hexadecimais que usamos antes, pois permitem o canal de transparência alfa. Isso significa que o fundo de um elemento com transparência alfa mostrará o que está por baixo.
A declaração de cores RGBA é semelhante em sintaxe às regras RGB padrão. No entanto, entre outras coisas, precisamos declarar o valor como RGBA (em vez de RGB) e definir um valor decimal adicional de transparência após o valor da cor no intervalo de 0,0 (transparência total) a 1 (opacidade total).
Cor: rgba (255,255,0,0,5); cor: rgba (100%, 100%, 0,0,5);
A diferença entre a propriedade opacity e RGBA é que a propriedade opacity aplica transparência a todo o elemento, ou seja, todo o conteúdo do elemento se torna transparente. E RGBA permite que você defina a transparência de partes individuais de um elemento (por exemplo, apenas o texto ou fundo):
Corpo (imagem de fundo: url (img.jpg);) .prim1 (largura: 400px; margem: 30px 50px; cor de fundo: #ffffff; borda: 1px preto sólido; espessura da fonte: negrito; opacidade: 0,5; filtro : alfa (opacidade = 70); / * para IE8 e anteriores * / text-align: center;) .prim2 (largura: 400px; margem: 30px 50px; cor de fundo: rgba (255,255,255,0,5); borda: 1px sólido preto; peso da fonte: negrito; alinhamento do texto: centro;) Experimente "
Nota: Os valores RGBA não são suportados no IE8 e anteriores. Para declarar uma cor substituta para navegadores mais antigos que não suportam valores de cor alfa, especifique-a primeiro antes do valor RGBA: background: rgb (255,255,0); fundo: rgba (255,255,0,0,5);
