
La propiedad background-clip CSS especifica cómo el fondo del elemento descansará sobre los bordes del elemento, ya sea que el fondo sea un color <color>
o una imagen <image>
.
Si un elemento no tiene el atributo background-image
o background-color
, el marco del elemento cubrirá la diferencia entre los valores de este atributo sólo en raras ocasiones (como resultado del efecto del atributo border-style
o border-image
).
Funciones background clip en css
Valor inicial | border-box |
---|---|
Aplicado a | Todos los artículos. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/*-------- palabras reservadas ---------*/ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* -------- valores globales --------*/ background-clip: inherit; background-clip: initial; background-clip: unset;
Ejemplos y aplicaciones
En este ejemplo, cada elemento tendrá un valor diferente para background-clip
.
Código HTML:
< p class = "border-box" > El fondo se extenderá más allá del marco. </ p > < p class = "padding-box" > El fondo se extenderá hasta el borde interior del marco. </ p > < p class = "content-box" > El fondo se extenderá solo hasta los límites del content-box. </ p > < p class = "text" > El fondo solo será visible en el texto. </ p >
Código CSS:
p { background: #28832c; border: 4px dashed black; padding: 2em; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; color: rgba(0, 0, 0, .2); }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4.0 | 3,5 | 1.0 |
Valor del texto | usando el anterior -webkit- | 49,0 | No soportado | usando el anterior -webkit- | usando el anterior -webkit- |
Estructura general
border-box
El fondo se extenderá hasta el borde exterior del borde, pero caerá por debajo.
padding-box
El fondo se extenderá hasta el borde exterior del área de relleno y el fondo no se dibujará debajo del marco.
content-box
El borde de fondo será el cuadro de contenido.
text
El fondo se dibujará dentro del texto contenido en el elemento. Consulte la sección Compatibilidad con navegadores para obtener información sobre qué navegadores admiten este valor.
Estructura formal
background-clip: <box>#;
El valor se puede repetir <box>
más de una vez (separado por una coma) para definir los límites de cada imagen de fondo.
<box> = border-box | padding-box | content-box
Ver también
- Propiedades de la página incautados por la propiedad de acceso directo
background
: labackground-color
,background-image
,background-origin
,background-position
,background-repeat
,background-size
, ybackground-attachment
. - Página de propiedades
border
para establecer el marco del elemento. - Página de propiedades
color
para establecer el color del elemento. - página de características
box-sizing
.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS