background-clip y background-origin son nuevas propiedades del módulo de fondo agregadas en CSS3, que se utilizan para determinar la posición del fondo.
background-clip se utiliza para determinar si el fondo contiene el área del borde. Y el origen de fondo se utiliza para determinar la posición de referencia para el cálculo de la posición de fondo.
La sintaxis es:
clip de fondo: [borde | relleno] [, [borde | relleno]]* |
Para clip de fondo:
Si es un valor de relleno, el fondo ignora los bordes de relleno y el borde es transparente. Si es un valor de borde, el fondo incluye el área del borde. Si hay varias imágenes de fondo, los valores de clip de fondo correspondientes están separados por comas.
Para origen de fondo:
Si es un valor de relleno, la posición es relativa al borde de relleno ("0 0" es la esquina superior izquierda del borde de relleno y "100% 100%" es la esquina inferior derecha). Si es un valor de borde, significa el borde del borde relativo. El valor del borde es relativo al borde del contenido. Al igual que el clip de fondo, varios valores están separados por comas. Si clip de fondo es el valor de relleno, origen de fondo es el valor del borde y posición de fondo es "arriba a la izquierda" (valor inicial predeterminado), la esquina superior izquierda de la imagen de fondo se cortará.
Estos dos atributos solo aparecen en CSS3. ¿Qué pasa con el comportamiento predeterminado en el módulo de fondo cuando no se usa este atributo?
| background-clip tiene por defecto algo como background-clip:border. origen-fondo tiene por defecto algo como origen-fondo:relleno. |
Pero IE es un caso especial (apesta).
En IE6 e IE7, el fondo de los elementos generales (excepto botones, etc.) es equivalente a: background-clip:border;
El fondo de los elementos hasLayout (botones más, etc.) es equivalente a: background-clip:padding;
Este par de propiedades CSS3 se ha implementado en navegadores como Mozilla, Safari 3 y Konqueror, pero todas se expresan a través de sus propiedades privadas.
Los atributos privados de los navegadores básicos que no son IE generalmente comienzan con -xxx-, -o- es privado para Opera con Presto como motor, -icab- es privado para iCab y -khtml- es el navegador con KHTML como motor. (como Konqueror Safari), -moz- es un navegador basado en el motor Gecko de Mozilla (como Firefox, Mozilla), -webkit- es un navegador (como Safari, Swift) basado en el motor de renderizado Webkit (un derivado de KHTML ).
Es decir, los atributos privados admitidos son:
| -moz-fondo-clip -webkit-fondo-clip -khtml-fondo-clip -moz-fondo-origen -webkit-fondo-origen -khtml-fondo-origen |
Aquí hay un ejemplo simple del uso del atributo de origen de fondo. El efecto es el siguiente:
código HTML:
| <button>Estandarización web www.div-css.com</button> |
Código CSS:
botón { border:3px double #95071b;/*Use borde doble de 3px para simular la línea blanca en el diseño*/ color de fondo:#95071b; /*Establecer método de recorte de fondo y líneas guía*/ -moz-fondo-origen:relleno; /*Compatible con versiones anteriores*/ color:#fff; /*Se soluciona el problema de altura en IE6*/ |
Desventajas: este efecto no se puede lograr con Opera. Por supuesto, esta es solo una solución para aquellos que están obsesionados con el código HTML (limitado al aprendizaje y la comprensión de los atributos de clip de fondo y origen de fondo). Por supuesto, también puede probar otros métodos, que pueden hacer que CSS sea más conciso. En cuanto a las ventajas de varios métodos, las desventajas dependen de usted.