Propiedad CSS background-clip

La propiedad CSS background-clip define hasta dónde se extienden el background-color y el background-image dentro de un elemento — es decir, el área de pintura del fondo. Por defecto, el fondo se pinta hasta el borde exterior del borde (border), pero background-clip permite detenerlo en el borde del padding, el borde del contenido, o incluso recortarlo según la forma del texto.

Esta página explica qué hace cada valor, cuándo usarlo, la diferencia entre background-clip y la propiedad relacionada background-origin, y un ejemplo funcional para cada valor.

Si el elemento no tiene background-color ni background-image, esta propiedad no tiene efecto visual.

La propiedad background-clip es una de las propiedades CSS3.

Cuándo usarlo

Fondos internos — usa padding-box o content-box para que un borde translúcido (por ejemplo, un borde dashed o dotted) muestre la página detrás en lugar del color de fondo del elemento.
Texto con degradado o imagen — combina background-clip: text con un background-image colorido y color: transparent para rellenar las letras con un degradado.
Tarjetas en capas — combina con background-origin para controlar dónde empieza una imagen de fondo (origin) frente a dónde se recorta (clip).

Para recortar un fondo al texto, también se requiere una versión con prefijo de proveedor (-webkit-background-clip) para compatibilidad con la mayoría de los navegadores (véase la nota sobre el valor text más adelante).

Valor inicial	border-box
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredado	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.backgroundClip = "content-box";

Sintaxis

Sintaxis de la propiedad CSS background-clip

background-clip: border-box | padding-box | content-box | text | initial | inherit;

Ejemplo de la propiedad background-clip:

Ejemplo de la propiedad CSS background-clip con el valor content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px solid #666;
        padding: 15px;
        background: #ccc;
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the "content-box" value is used.</p>
    <div id="example">
      <p>The background extends to the edge of the content box.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, observa la diferencia entre los valores "padding-box" y "border-box".

Ejemplo de la propiedad background-clip con los valores "padding-box" y "border-box":

Ejemplo de la propiedad CSS background-clip con el valor border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px dashed #666;
        padding: 15px;
        background: #1c87c9;
        background-clip: border-box;
      }
      #example2 {
        border: 5px dashed #666;
        padding: 15px;
        background: #1c87c9;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "border-box" (this is the default value).</p>
    <div id="example1">
      <p>The background extends behind the border.</p>
    </div>
    <p>Here the background-clip is set to "padding-box".</p>
    <div id="example2">
      <p>The background extends to the inside edge of the border.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

El valor text recorta el fondo para que solo sea visible a través de la forma del texto en primer plano. Para ver el fondo en lugar de letras sólidas, establece color: transparent (o un color semitransparente) de modo que el texto en sí no cubra el fondo. Esta es la técnica estándar para encabezados rellenos con degradado.

Compatibilidad con navegadores: el valor text aún necesita el prefijo -webkit-background-clip: text en la mayoría de los navegadores. Declara siempre -webkit-background-clip: text; y background-clip: text; juntos, tal como hace el ejemplo a continuación.

Ejemplo de la propiedad background-clip con el valor "text":

Ejemplo de la propiedad CSS background-clip con el valor text

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example {
        border: 3px dashed #1ebf42;
        padding: 15px;
        background: #1c87c9;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-clip property example</h2>
    <p>Here the background-clip is set to "text"</p>
    <div id="example">
      <p>The background is painted within the foreground text.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

background-clip vs background-origin

Estas dos propiedades se confunden con facilidad porque comparten las mismas palabras clave de caja (border-box, padding-box, content-box):

background-origin establece dónde comienza el área de posicionamiento de la imagen de fondo — la caja de referencia para background-position y un background-size que no sea cover.
background-clip establece dónde se recorta el fondo pintado — todo lo que quede fuera de esta caja no se muestra.

Un fondo puede por tanto comenzar en el borde del border (background-origin: border-box) pero recortarse en el borde del contenido (background-clip: content-box), de modo que la parte sobre el padding y el border quede oculta.

Valores

Valor	Descripción	Pruébalo
border-box	El fondo aparece detrás del borde. Este es el valor por defecto.	Pruébalo »
padding-box	El fondo aparece dentro del borde.	Pruébalo »
content-box	El fondo se extiende hasta el borde de la caja de contenido.	Pruébalo »
text	El fondo se pinta dentro del texto en primer plano.	Pruébalo »
initial	Establece la propiedad a su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuáles de los siguientes valores se pueden usar con la propiedad 'background-clip' en CSS?

'padding-box''content-box''border-box''shadow-box'