Transparência de fundo CSS. Fundo transparente ou texto usando CSS

Com o advento do CSS3, o trabalho dos designers de layout em muitos aspectostornou-se mais simples e mais lógico: na verdade, agora é possível configurar um objeto de maneira muito flexível, com menos frequência recorrendo ao JavaScript. Vamos dizer que você precisa ajustar a transparência do plano de fundo - o CSS oferece imediatamente várias opções.

O fundo é definido por um conjunto de atributos (background-image,background-position, background-size, background-repeat, fundo-anexo, background-origin, background-clip, background-color), cada um dos quais pode ser registrado separadamente ou combinado sob o atributo background. Vamos analisar cada um deles em mais detalhes.

O atributo cor de fundo

Em CSS, você pode especificar a cor do plano de fundo de várias maneiras: usando o código hexadecimal, um nome de cor ou um registro RGB. Em CSS3, tornou-se possível usar a opção RGBA em vez do registro RGB.

O código de cor hexadecimal é escrito empropriedade após a grade: background-color: # FFDAB9. Se os caracteres em tal registro são combinados em pares, o código é geralmente um pouco encurtado: # ccff00 pode ser escrito como # cf0:

corpo {background-color: # cf0;}.

O nome é mesmo nas flores mais exóticas. Por exemplo, além do padrão vermelho e branco, você pode usar NavajoWhite (#FFDEAD) ou Honeydew2 (# E0EEE0):

corpo {cor de fundo: roxo;

A última versão da gravação RGB ou RGBA permitedefinir não apenas a cor, mas também a transparência do plano de fundo CSS, mas o método funciona no IE apenas na versão 9. Outros navegadores normalmente reconhecem a opção com transparência. Por padrões W3C, é preferível usar RGBA em vez do RGB mais comum.

O último valor para RGBA e define a opacidade do plano de fundo de 0 (transparente) para 1 (opaco).

Existem alguns significados mais incomuns. A cor de fundo pode ser definida com HSL e HSLA. Ambos foram adicionados a CSS3, e, portanto, não são suportados pelo IE versão 9 ou superior. Concretizações RGB idênticos ou rgba, apenas em um formato diferente: Matiz (cor - valor na roda de cores, é dada em graus), saturado (saturação - a intensidade da cor como uma percentagem, de 0 a 100), a claridade (leveza - brilho, medido de forma semelhante parâmetro Saturar ).

O atributo background-image

A versão mais cruzada do plano de fundo transparente é a utilização de imagens. Em CSS3, você pode até especificar várias imagens, isso é feito separado por vírgulas. Exemplo:

corpo {background-image: url (bg1.png), url (bg2.png)}.

Este método ainda suporta o IE8. Várias imagens como plano de fundo são usadas para layout de borracha. O principal é não esquecer, ao usar qualquer imagem, também definir a cor de fundo no CSS, uma vez que os usuários podem simplesmente não carregar a imagem.

Atributo de posição de plano de fundo

Se você usar uma imagem para definir o plano de fundobloco, CSS permitirá que você posicione a imagem em qualquer lugar na tela. Por padrão, a imagem está localizada no canto superior esquerdo. O atributo aceita instruções verbais (superior, inferior, esquerda, direita) ou numérica (porcentagens, pixels e outras unidades de medida). É necessário especificar dois valores: horizontal e verticalmente:

Atributo de tamanho de plano de fundo

Às vezes você quer esticar o fundo usando CSS oureduza seu tamanho. Para fazer isso, use o atributo background-size e o tamanho do plano de fundo pode ser especificado em pixels ou porcentagem e em qualquer outra unidade de medida.

Existem alguns problemas com este atributo: Para exibir corretamente o plano de fundo em versões anteriores dos navegadores, você deve usar prefixos. Naturalmente, as versões atuais suportam totalmente esse atributo e a necessidade de propriedades específicas desapareceu.

Atributo Background-attachment

Este atributo define o comportamento da imagem de fundo durante a rolagem. Então, pode levar 3 valores (sem considerar a herança, que é comum a todos os atributos apresentados neste artigo):

• fixo - faz a imagem no fundo ainda;
• rolar - o plano de fundo rola junto com os outros elementos;
• local - A imagem no plano de fundo rolará se a rolagem tiver conteúdo. Um fundo que vai além do conteúdo é capturado.

Exemplo de uso:

corpo {background-attachment fixed}.

Atualmente, o Firefox não suporta a última propriedade (local).

Atributo origem de fundo

Este atributo é responsável pelo posicionamento do elemento. Navegadores anteriores exigem o uso de prefixos. A propriedade em si tem três parâmetros:

• caixa de preenchimento posicionar o fundo em relação à borda, levando em conta a espessura do quadro;
• caixa de borda difere da propriedade anterior em que a linha de limite pode sobrepor completamente ou parcialmente o plano de fundo;
• caixa de conteúdo Posiciona a imagem colando-a ao conteúdo.

Se vários valores forem configurados, os navegadores poderão reagir da mesma maneira: o Firefox e o Opera aceitam apenas a primeira opção.

Atributo repetição de fundo

Por via de regra, se o fundo é ajustado pela imagem,deve ser repetido horizontalmente ou verticalmente. É para isso que o atributo background-repeat é usado. Portanto, o plano de fundo do bloco, cujo CSS contém tal propriedade, pode ter um dos vários parâmetros:

• não repetir - A imagem aparece na página em uma única versão;
• repetir - o fundo é repetido ao longo dos eixos xey;
• repetir-x - apenas horizontalmente;
• repetir-y - apenas verticalmente;
• espaço - o fundo se repete, mas se o espaço não for preenchido, aparecem vazios entre as imagens;
• rodada - A imagem é dimensionada se for impossível preencher a área inteira com imagens inteiras.

Exemplo de uso de atributos:

corpo {background-repeat: no-repeat repeat} - similarmente background-repeat: repeat-y.

Atributo de clipe de fundo

Esse atributo define o comportamento do plano de fundo sob as bordas (por exemplo, no caso de uma caixa tracejada):

• caixa de preenchimento - o fundo é exibido estritamente dentro do bloco;
• caixa de borda - a imagem vem sob o quadro;
• caixa de conteúdo - A imagem em segundo plano aparece apenas dentro do conteúdo.

Exemplo de uso:

corpo {background-clip: content-box;