Com o advento do trabalho CSS3 DTP em muitos aspectos, tornou-se mais fácil e mais lógico: afinal, agora você pode fazer para configurar um objeto de forma flexível, mais raramente recorrer ao JavaScript.Vamos dizer que você precisa para ajustar a transparência do fundo - CSS imediatamente oferece várias opções.
fundo definida por um conjunto de atributos (background-image, background-position, background-size, background-repeat, background-attachment, background-origem, background-grampo, background-color), cada um dos quais podem ser prescritos isoladamente ouunir-se sob o mesmo fundo atributo.Vamos examinar cada uma delas com mais detalhes.
atributo background-color
Em CSS, a cor do fundo pode ser definido de várias maneiras: usando o código hexadecimal, nome da cor ou RGB-entrada.Em CSS3 tornou-se possível usar em vez de opção RGB-gravação com RGBA.
código de cor hex está escrito na propriedade após a rede: background-color: # FFDAB9.Se os personagens em pares coincidir com tal registro, o código é geralmente um pequeno corte: # ccff00 pode ser escrita como # cf0:
body {background-color: # cf0;}.
nome lá, mesmo nas cores mais exóticas.Por exemplo, além do padrão vermelho e branco, você pode usar NavajoWhite (#FFDEAD) ou Honeydew2 (# E0EEE0):
body {background-color: purple;}.
RGB última opção ou registro RGBA permite especificar não só a cor, mas também a transparência da CSS fundo, mas o caminho para o trabalho no IE 9 apenas versões mais antigas.Outros navegadores reconhecer variante normal com transparência.De acordo com os padrões W3C é preferível utilizar todos a mesma em vez de o rgba RGB mais usual.
último valor no RGBA define a opacidade do fundo e de 0 (transparente) a 1 (opaco).
Existem alguns valores incomuns.A cor do fundo pode ser especificado usando HSL e HSLA.Ambos foram adicionados em CSS3, e, portanto, não é suportado pelo IE versão 9 ou superior.As opções são idênticas para RGB ou RGBA, apenas em um formato diferente: Hue (matiz - o valor na roda de cores, é dado em graus), saturado (saturação - intensidade da cor como uma porcentagem, de 0 a 100), Lightness (luminosidade - brilho, medida de modo análogo parâmetro Saturate).
atributo background-image
versão mais cross-browser de um fundo transparente - é o uso da imagem.Em CSS3, você pode especificar ainda mais imagens, isso é feito através de uma vírgula.Exemplo:
body {background-image: url (bg1.png), url (bg2.png)}.
suporta este mesmo IE8.Diversas imagens como plano de fundo usado no layout da borracha.É importante ressaltar que não se esqueça de usar qualquer imagem como definido em sua cor de fundo CSS, pois os usuários podem simplesmente fazer upload de uma foto.
atributo background-position
Se você usar uma imagem para definir o bloco de fundo, CSS permite posicionar a imagem em qualquer lugar na tela.Por padrão, a imagem está localizada no canto superior esquerdo.Atributo aceitar quaisquer instruções verbais (superior, inferior, esquerda, direita), ou numérica (juros, pixels e outras unidades).É necessário especificar os dois valores para a horizontal e vertical: corpo
{fundo-posição: centro-direita;} - Neste exemplo, o fundo será localizado no lado direito da página, com a parte superior e inferior da distância para a imagem são as mesmas.
atributo background-size
Às vezes você precisa usar CSS para esticar o fundo ou reduzir seu tamanho.Para este efeito, o atributo de fundo de tamanho, o tamanho e pode ser definido como o fundo ou a percentagem de pixels, ou em qualquer outra unidade de medida.
Com este atributo, existem alguns problemas: a visualização correcta de um fundo em navegadores mais antigos, você deve usar um prefixo.Claro, as versões atuais apoiar plenamente este atributo ea necessidade de propriedades específicas desapareceu.
atributo background-attachment
Este atributo especifica o comportamento da imagem de fundo durante a rolagem.Por exemplo, ele pode tomar 3 valores (excluindo herdar, para o total de todos os atributos neste artigo):
- fixos - torna a imagem no fundo da fixa;
- scroll - os pergaminhos de fundo com o resto dos elementos;
- local - a imagem no fundo é rolada se a rolagem é o conteúdo.Fundo, que vai para além do conteúdo é fixo.
Exemplo de uso:
body {background-attachment fixo}.
Atualmente, o Firefox não suporta o mais recente estabelecimento (local).
fundo atribuir-origem
Este atributo é responsável para o posicionamento do elemento.Browsers versões anteriores exigem o uso de prefixos.A propriedade em si tem três parâmetros: posições padding-caixa
- a partir da borda do fundo, tendo em conta a espessura da estrutura;
- propriedades border-box diferentes da anterior, em que a linha de fronteira pode ser completamente ou parcialmente cobrir o fundo;Imagem de posicionamento de conteúdo de caixa
- pryavyazyvaya seu conteúdo.
Se você especificar vários valores, o navegador pode reagir à sua própria maneira: o Firefox e Opera só aceita a primeira opção.
atributo background-repeat
Como regra geral, se a imagem de fundo for especificado, ele deve ser repetido horizontalmente ou verticalmente.Para este e usado o atributo background-repeat.Assim, Fundo do bloco, CSS, que contém uma propriedade pode ter uma das várias opções:
- no-repeat - imagem aparece na página em uma única forma;
- repetição - padrão repetido no x e y;
- repeat-x - apenas horizontalmente;
- repeat-y - apenas na vertical;
- espaço - padrão se repete, mas se o espaço não foi preenchido, então há espaços vazios entre imagens;
- rodada - a imagem será dimensionada, se não preencher toda a imagem de toda a área.
Exemplo de atributo:
body {background-repeat: no-repeat repetição} - semelhante background-repeat: repeat-y.
Em CSS3 pode especificar valores para várias imagens se os parâmetros de transferência separados por vírgulas.
atributo fundo-grampo
Este atributo especifica o comportamento do fundo sob os limites (por exemplo, no caso das armações pontilhadas):
- estofamento-caixa - fundo exibida no interior do bloco;
- border-box - vem no âmbito da imagem;
- conteúdo de caixa - a imagem no fundo aparece somente dentro do conteúdo.
Exemplo de uso:
body {background-clip: conteúdo de caixa;}.
Chrom Safari e requerem a utilização de o -webkit- prefixo.
atributo opacidade e filtrar
atributo opacidade permite que você defina a transparência de fundo - propriedade CSS irá funcionar em todos os navegadores.O valor é ajustável de 0.0 a 1.0 inclusive.Com isso, você pode definir a transparência do fundo CSS sem um valor inteiro, em vez de 0,3 é o suficiente para escrever 0,3:
.block {background-image: url (img.png);opacidade: 0,3;}.
Para definir a transparência do fundo, CSS é adequado, mesmo para IE abaixo da nona versão, use o filtro de atributo:
.block {background-image: url (img.png);filter: alpha (opacidade = 30);}.
Neste caso, a opacidade está definida entre 0 e 100. Note-se que a opacidade atribuir diferentes configurações de transparência através RGBA hereditariedade: opacidade usando um fundo transparente é não só, mas também todos os itens dentro da unidade.
Certifique-se sempre as estatísticas de uso do navegador da CEI e todos os outros países.O maior problema de todos DTP - versões mais antigas do IE, eles não permitem a plena utilização do CSS3.Se o layout não se esqueça de usar os serviços especiais que verificam se o seu navegador é uma propriedade CSS.Se você não pode instalar versões mais antigas de navegadores, você obter o serviço que verifica o funcionamento do site em diferentes navegadores online.
