Clip de fondo - Trucos CSS

Anonim

background-clip le permite controlar hasta qué punto se extiende una imagen o color de fondo más allá del relleno o el contenido de un elemento.

.frame ( background-clip: padding-box; )

Valores

  • border-boxes el valor predeterminado. Esto permite que el fondo se extienda hasta el borde exterior del borde del elemento.
  • padding-box recorta el fondo en el borde exterior del relleno del elemento y no deja que se extienda hacia el borde.
  • content-boxrecorta el fondo en el borde del cuadro de contenido.
  • inheritaplica la background-clipconfiguración del padre al elemento seleccionado.

Población

background-clip se explica mejor en acción, por lo que hemos reunido dos demostraciones para mostrar cómo funciona.

En la primera demostración, cada div tiene un párrafo dentro. El párrafo es el contenido del div. Cada div tiene un fondo amarillo y un borde azul claro semitransparente de 5 píxeles.

Vea el clip de fondo de Pen de CSS-Tricks (@ css-tricks) en CodePen.

De forma predeterminada, o con el background-clip: border-boxconjunto, el fondo amarillo se extiende hasta el borde exterior del borde. Observe cómo el borde se ve verde debido al fondo amarillo debajo de él.

Cuando background-clipse cambia a padding-box, el color de fondo se detiene donde termina el relleno del elemento. Observe que el borde es azul porque no se permite que el fondo se filtre en el borde.

Con background-clip: content-box, el color de fondo solo se aplica al contenido del div, en este caso el elemento de párrafo único. El relleno y el borde del div no tienen un color de fondo. Pero hay un pequeño detalle que vale la pena mencionar: el color se extiende hasta el margen del contenido. Compruebe las diferencias entre el primer y el segundo ejemplo con content-box.

En el primer content-boxejemplo, los márgenes predeterminados del navegador se aplican al párrafo y los clips de fondo después del margen. En el segundo ejemplo, el margen se establece en 0 en el CSS y el fondo se recorta en el borde del texto.

Esta próxima muestra interactiva background-clipcon una imagen de fondo. El contenido de esta demostración es un div vacío más pequeño.

Vea el ejemplo interactivo de clip de fondo de Pen de Timothy Miller (@tjacobdesign) en CodePen.

Esta demostración también se aplica background-size: covery background-repeat: no-repeatademás de background-clipcontrolar la imagen de fondo, que de otro modo se repetiría hasta el recorte.

Texto

Existe una versión con prefijo de proveedor de esto que funciona para recortar un fondo al texto. Para que funcione, el texto también deberá ser transparente. Afortunadamente, hay otra propiedad de color de texto con prefijo de proveedor que puede anular de manera efectiva color, lo que lo hace seguro de usar, ya que puede tener un respaldo:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome y Safari lo admiten.

Vea el
texto de Pen Lit de Chris Coyier (@chriscoyier)
en CodePen.

Relacionado

  • adjunto de fondo
  • color de fondo
  • imagen de fondo
  • origen de fondo
  • posición de fondo
  • repetición de fondo
  • tamaño de fondo

Más recursos

  • background-clip en la especificación CSS3
  • clip de fondo en MDN
  • El modelo de caja CSS

Soporte del navegador

¡Todo claro!

Cromo Safari Firefox Ópera ES DECIR Androide iOS
1+ 3+ 4+ 10,5+ 9+ 4.1+ Trabajos