transparência do fundo CSS. fundo transparente ou texto com CSS

Com o advento da web designers CSS3 trabalhar em muitas maneiras se tornou mais fácil e mais lógico: afinal, agora você pode realmente flexível personalizar qualquer objeto, menos frequentemente recorrer ao JavaScript. Vamos dizer que você precisa para ajustar a transparência do fundo – CSS oferece imediatamente várias opções.

Fundo definida por um conjunto de atributos (fundo-imagem, o fundo-de posição de fundo de tamanho, fundo-de repetição, fundo-de fixação, fundo-de origem, fundo-de clipe, cor de fundo), cada um dos quais pode ser atribuídas separadamente ou combinados sob o atributo fundo. Vamos examinar cada um deles em detalhe.

Atributo background-color

Em CSS, a cor de fundo pode ser definido de várias maneiras: usando um código hexadecimal, nome da cor ou RGB-entrada. Em CSS3 tornou-se possível usar a opção RGB-de gravação com RGBA em vez de.

código de cor hexadecimal é gravado na propriedade após a rede: background-color: # FFDAB9. Se os personagens desta entrada são os mesmos pares, o código é geralmente um pequeno corte: # ccff00 pode ser escrita como # cf0:

body {background-color: # cf0 ;}.

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

body {background-color: purple; }.

A última opção é RGB ou entrada RGBA permite que você especifique não só cor, mas também a transparência do fundo do CSS, mas o método funciona apenas em versões do IE com idade superior a 9. Outros navegadores reconhecem versão normal com transparência. De acordo com os padrões W3C é preferível usar ainda rgba vez do RGB mais usual.

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

Existem alguns valores incomuns. A cor de fundo pode ser definido usando o 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 ).

background-image Atributo

A versão mais cross-browser do fundo transparente – este é o uso da imagem. Em CSS3, você pode definir ainda mais imagens, isso é feito através de uma vírgula. exemplo:

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

Esta forma de apoiar ainda IE8. Diversas imagens no fundo da borracha usados no layout. Importante, não se esqueça de usar qualquer imagem e definir a cor de fundo em CSS, como os usuários podem simplesmente fazer upload de uma imagem.

Atributo background-position

Se você usar a imagem para definir a unidade de fundo, CSS permite posicionar a imagem em qualquer lugar na tela. Por padrão, a imagem está localizada no canto superior esquerdo. Atributo leva tanto instruções verbais (superior, inferior, esquerda, direita), um numérica (juros, pixels e outras unidades). Neste caso, é necessário especificar dois valores, horizontais e verticais:

body {background-position: centro-direita ;} – neste exemplo, o padrão será localizado no lado direito da página, a parte superior e inferior da distância para o mesmo.

Atributo background-size

Às vezes é necessário para esticar o fundo CSS ou reduzir seu tamanho. Para fazer isso, use o atributo background-size, eo tamanho do fundo pode ser definida em pixels ou porcentagens, e quaisquer outras unidades.

Com este atributo, existem alguns problemas: a visualização correcta de um fundo nas versões anteriores dos prefixos do navegador a ser usado. Claro, a versão atual apoia plenamente este atributo ea necessidade de propriedades específicas desapareceu.

Atributo background-attachment

Este atributo especifica o comportamento das imagens de fundo durante a rolagem. Assim, pode demorar 3 valores (não incluindo a herdar, o total para todos os atributos discutidos neste artigo):

• fixa – torna a imagem no fundo do fixo;
• rolar – pergaminhos de fundo com o resto dos elementos;
• local – a imagem no fundo é rolada se rolagem tem conteúdo. Fundo que ultrapassa o conteúdo do quadro é fixo.

Exemplo de utilização:

{corpo fundo-de fixao fixo}.

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

Atributo background-origem

Este atributo é responsável para o elemento de posicionamento. navegadores início requer o uso de prefixos. A propriedade em si tem três parâmetros:

• preenchimento da caixa é posicionado em relação ao padrão de aresta, tendo em conta a espessura da estrutura;
• Propriedades fronteira-caixa diferente da anterior na medida em que a linha de limite pode ser completamente ou parcialmente sobrepor-se ao padrão;
• image posicionamento de conteúdo de caixa pryavyazyvaya seu conteúdo.

Se você especificar vários valores, em seguida, os navegadores podem reagir à sua própria maneira: Firefox e Opera percebemos apenas a primeira opção.

Atributo background-repeat

Como regra geral, se a imagem de fundo for especificado, ele deve ser repetido horizontalmente ou verticalmente. Por esta e usado o atributo background-repeat. Assim, fundo do bloco, CSS, que contém uma tal propriedade pode ter um dos vários parâmetros:

• no-repeat – a imagem aparece em uma página em uma única versão;
• repetir – fundo se repete no x e y;
• repeat-x – apenas horizontalmente;
• repetir-y – apenas na vertical;
• espaço – fundo é repetido, mas se o espaço é impossível preencher entre as imagens aparecem vazio;
• rodada – a imagem é dimensionada, se não preencher toda a área de todo fotos.

Exemplo dos atributos:

body {background-repeat: no- repetir repetir} – semelhante background-repeat: repeat-y.

Em CSS3 pode especificar valores para várias imagens ao listar parâmetros, separados por vírgulas.

Atributo background-clipe

Este atributo define o comportamento do fundo sob os limites (por exemplo, no caso das armações pontilhadas):

• padding-box – fundo exibida no interior do bloco;
• border-box – a imagem vem no âmbito do quadro;
• conteúdo de caixa – a imagem no fundo só vai aparecer dentro do conteúdo.

Exemplo de utilização:

body {background-clip: conteúdo- caixa;}.

Chrom e Safari requerem prefixo -webkit-.

atributos de opacidade e filtro

atributo opacidade permite definir a transparência do fundo – propriedade CSS irá funcionar em todos os navegadores. O valor é definido na faixa de 0.0 a 1.0 inclusive. Neste caso, você pode definir a transparência do fundo do CSS nenhum valor inteiro, em vez de 0,3 é o suficiente para escrever .3:

.block {background-image: url ( img.png); opacidade: 0,3;}.

Para definir a opacidade fundo, CSS é adequado mesmo para IE abaixo da nona versão, use o atributo de filtro:

.block {background-image: url ( img.png); Filtro: alfa (opacidade = 30)}.

Neste caso, o valor de opacidade é definida entre 0 e 100. Note-se que a opacidade atribuir diferentes configurações de transparência através de herança RGBA: ao usar opacidade torna-se evidente não só o fundo, mas também todos os elementos no interior da unidade.

Sempre monitorar as estatísticas de uso de navegadores da CEI e todos os outros países. O maior problema de todos DTP – versões mais antigas do IE, eles não permitem que você use a extensão CSS3 completa. No layout não se esqueça de usar os serviços especiais que verificam se o seu browser suporta qualquer propriedade CSS. Se você não pode instalar versões mais antigas de navegadores, encontrar um serviço que irá verificar o trabalho do local em vários navegadores online.