background-clip e background-origin são novas propriedades do módulo de fundo adicionadas em CSS3, usadas para determinar o posicionamento do fundo.
background-clip é usado para determinar se o fundo contém a área da borda. E a origem de fundo é usada para determinar a posição de referência para o cálculo da posição de fundo.
A sintaxe é:
clipe de fundo: [borda | preenchimento] [, [borda | preenchimento]]* |
Para clipe de fundo:
Se for um valor de preenchimento, o plano de fundo ignora as bordas do preenchimento e a borda é transparente. Se for um valor de borda, o plano de fundo inclui a área da borda. Se houver várias imagens de imagem de fundo, os valores correspondentes do clipe de fundo serão separados por vírgulas.
Para origem em segundo plano:
Se for um valor de preenchimento, a posição será relativa à borda do preenchimento ("0 0" é o canto superior esquerdo da borda do preenchimento e "100% 100%" é o canto inferior direito). Se for um valor de borda, significa a borda relativa da borda. O valor da borda é relativo à borda do conteúdo. Assim como o clipe de fundo, vários valores são separados por vírgulas. Se background-clip for o valor de preenchimento, background-origin for o valor da borda e background-position for "canto superior esquerdo" (valor inicial padrão), o canto superior esquerdo da imagem de fundo será cortado.
Esses dois atributos aparecem apenas no CSS3. E quanto ao comportamento padrão no módulo de fundo quando este atributo não é usado?
| O padrão do clipe de fundo é algo como clipe de fundo: borda. o padrão de origem de fundo é algo como origem de fundo: preenchimento. |
Mas o IE é um caso especial (é uma merda).
No IE6 e IE7, o plano de fundo dos elementos gerais (exceto botões, etc.) é equivalente a: background-clip:border; background-origin:border;
O plano de fundo dos elementos hasLayout (mais botões, etc.) é equivalente a: background-clip:padding; background-origin:padding;
Este par de propriedades CSS3 foi implementado em navegadores como Mozilla, Safari 3 e Konqueror, mas todas são expressas através de suas propriedades privadas.
Os atributos privados de navegadores básicos não-IE geralmente começam com -xxx-, -o- é privado para Opera com Presto como mecanismo, -icab- é privado para iCab e -khtml- é o navegador com KHTML como mecanismo. (como Konqueror Safari), -moz- é um navegador baseado no mecanismo Gecko da Mozilla (como Firefox, Mozilla), -webkit- é um navegador (como Safari, Swift) baseado no mecanismo de renderização Webkit (um derivado de KHTML ).
Ou seja, os atributos privados suportados são:
| -moz-clip de fundo -webkit-clip de fundo -khtml-clipe de fundo -moz-background-origin -webkit-background-origin -khtml-background-origin |
Aqui está um exemplo simples de uso do atributo background-origin. O efeito é o seguinte:
Código HTML:
Código CSS:
botão { border:3px double #95071b;/*Use borda dupla de 3px para simular a linha branca no design*/ cor de fundo:#95071b; /*Definir método de corte de fundo e linhas guia*/ -moz-background-origin: preenchimento; /*Compatível com versões futuras*/ cor:#fff; /*Corrige problema de altura no IE6*/ |
Desvantagens: Este efeito não pode ser alcançado no Opera. Claro, esta é apenas uma solução para aqueles que são obcecados por código HTML (limitado ao aprendizado e compreensão dos atributos background-clip e background-origin. Claro, você também pode tentar outros métodos, o que pode tornar o CSS mais conciso). Quanto às vantagens dos vários métodos, as deficiências cabem a você avaliar.