En el mundo del diseño web, el posicionamiento y recorte de fondos es un elemento clave para lograr una presentación visualmente atractiva y agradable a la vista. CSS3, la última versión del lenguaje de diseño web, ofrece una amplia variedad de herramientas y propiedades para realizar este proceso de manera sencilla y eficiente. En este artículo, exploraremos las diferentes técnicas de posicionamiento y recorte de fondos que se pueden implementar utilizando CSS3. ¡Acompáñanos en este proceso de aprendizaje y lleva tus habilidades de diseño web al siguiente nivel!
CSS3 proporciona flexibilidad adicional para trabajar con propiedades de fondo. Estas propiedades permiten un control mucho mayor del fondo del elemento de destino.
En este resumen, cubriremos los background-origin
y background-clip
propiedades.
Al principio, puede parecer que estas dos propiedades proporcionan los mismos resultados, pero profundizaremos y mostraremos cómo estos dos propiedades se complementan mutuamente.
La propiedad de origen de fondo
El background-origin
propiedad se utiliza para determinar cómo el posición de fondo se determina el fondo. El background-origin
propiedad toma tres valores diferentes, border-box
, padding-box
y content-box
.
Necesitas entender el Modelo de caja CSS para entender cómo el background-origin
se utiliza la propiedad. El background-origin
la propiedad es soportado en Internet Explorer 9+, Firefox 4+, Opera, Chrome y Safari 5+.
Sintaxis de origen de fondo
El background-origin
propiedad especifica lo que posición de fondo la propiedad debe ser relativa a. El valor predeterminado es padding-box
.
background-origin: padding-box|border-box|content-box;
Valor | Descripción |
---|---|
border-box |
La imagen de fondo se coloca en relación con el cuadro del borde. |
padding-box |
La imagen de fondo se coloca en relación con el cuadro de relleno. |
content-box |
La imagen de fondo se coloca en relación con el cuadro de contenido. |
Ejemplo
En los siguientes tres ejemplos, notará que la imagen de fondo utilizada se coloca relativo hacia background-origin
valor. un valor de border-box
coloca la imagen de fondo hasta el borde del elemento.
un valor de padding-box
coloca la imagen justo fuera de la borde del bordey el content-box
coloca la imagen fuera de la borde acolchado.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: ##px /* Specify the width of your element */;
height: ##px /* Specify the height of your element */;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #ffffff;
background-origin: /* As defined by specific examples below */;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
origen de fondo: cuadro de borde
En este ejemplo, notará que el fondo está colocado hasta el borde del elemento, debajo del borde.
origen de fondo: caja de relleno
En este ejemplo, notará que el fondo está colocado en el borde superior izquierdo del borde, pero no debajo del borde. Se coloca debajo de la zona de acolchado.
origen de fondo: cuadro de contenido
En este ejemplo, notará que el fondo está colocado en el borde superior izquierdo del cuadro de relleno, pero no debajo del área de relleno. Se coloca debajo del área de contenido.
La propiedad background-clip
Para comprender el recorte, debe comprender el término «área de pintura». Los navegadores pintan los fondos en los elementos. El área de pintura es el cuadro donde se pintará ese fondo.
Todos los fondos se recortará al cuadro definido en esa propiedad. Si la imagen de fondo se desborda el cuadro, la imagen se recorta en los bordes del cuadro.
El background-clip
la propiedad es Apoyado por Internet Explorer 9+, Firefox 4+, Ópera y Chrome. En el momento de escribir este artículo, Safari admite la -webkit-background-clip
propiedad.
Usando background-clip con background-origin
Cuando aplicas el background-clip
propiedad, le está indicando al navegador que pintar el fondo dentro de esa caja, y si se desborda la caja, para sujetarla en los bordes de la caja.
Al igual que con el background-origin
propiedad, la background-clip
La propiedad tiene tres valores admitidos: border-box
, padding-box
y content-box
.
usas el background-origin
propiedad para colocar la imagen de fondo, pero se utiliza la background-clip
Propiedad para ambientar la zona de pintura.
Sintaxis de clip de fondo
El background-clip
La propiedad especifica el área de pintura del fondo. El valor predeterminado es border-box
.
background-clip: border-box|padding-box|content-box;
Valor | Descripción |
---|---|
border-box |
El fondo se recorta al cuadro del borde. |
padding-box |
El fondo se recorta en el cuadro de relleno. |
content-box |
El fondo se recorta en el cuadro de contenido. |
Ejemplo
Los siguientes ejemplos mostrarán cómo usar el background-origin
y background-clip
a posición y acortar el color de fondo o la imagen del elemento de destino.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: ##px /* Specify the width of your element */;
height: ##px /* Specify the height of your element */;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #ffffff;
background-clip: /* As defined by specific examples below */;
background-origin: /* As defined by specific examples below */;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
fondo-origen: cuadro de borde | clip de fondo: cuadro de contenido
En este ejemplo, la imagen de fondo es posicionado dentro de border-box
pero la imagen es cortado en el content-box
. Tome nota de las partes de la imagen que se han recortado. También deberías nota que el color de fondo también ha sido recortado.
El background-clip
y background-origin
las propiedades son mejor usado juntos para que no veas resultados inesperados.
Tenga en cuenta que estas dos propiedades tienen valores predeterminados diferentes. El background-clip
la propiedad por defecto es border-box
mientras que la background-origin
la propiedad por defecto es la padding-box
.