⇪

background-clip

facebook-svg gplus-svg twitter-svg

La propiedad background-clip de CSS3 especifica hasta donde se extiende el fondo ( background ) de un elemento, ya sea color o imagen. Por defecto el fondo ( background ) se extiende hasta el limite externo del borde.

En los siguientes ejemplos utilizamos un borde discontinuo ( dashed ) muy grueso ( 20px ) verde oscuro ( #050 ). Como que el borde es discontinuo podemos ver hasta donde se extiende el color de fondo.

Lea más sobre el modelo de caja en el CSS3


.bkclip{
	width:250px;
	height:150px;
	border:20px dashed #050;
	background-color:#6ab150;
	padding:20px;
	margin:0 auto;
	text-align:center;
}
el valor por defecto

el valor por defecto

Sintaxis

El valor de la propiedad background-clip puede ser una de estas palabras clave:

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

border-box

Si background-clip: border-box; el fondo ( background ) se extiende hasta el limite externo del borde.


.bkclip{
	width:250px;
	height:150px;
	border:20px dashed #050;
	background-color:#6ab150;
	padding:20px;
	margin:0 auto;
	text-align:center;
}
#borderBox{background-clip:border-box;}
border-box

border-box

padding-box

Si background-clip: padding-box; el fondo ( background ) se extiende hasta el limite externo del relleno ( padding ).


.bkclip{
	width:250px;
	height:150px;
	border:20px dashed #050;
	background-color:#6ab150;
	padding:20px;
	margin:0 auto;
	text-align:center;
}
#paddingBox{background-clip:padding-box;}
padding-box

padding-box

content-box

Si background-clip: content-box; el fondo ( background ) aparece solo dentro del ( clipped to ) contenido de la caja.

Observación: el espacio en blanco que queda entre el contenido y el borde representa el relleno ( padding:20px ) de la caja.


.bkclip{
	width:250px;
	height:150px;
	border:20px dashed #050;
	background-color:#6ab150;
	padding:20px;
	margin:0 auto;
	text-align:center;
}
#contentBox{background-clip:content-box;}

content-box

content-box

Crear mascaras de texto

En el CSS3, exactamente como en Photoshop, o en SVG, podemos crear mascaras de texto. O casi. De hecho Firefox todavía no nos deja hacerlo.

En el siguiente ejemplo utilizamos el titular <h1 class="panal"> para crear una mascara de texto. Para esto – ya lo sabemos – el texto tiene que ser transparente ( color:transparent; ).
El problema es que background-clip: text; no funciona en el Firefox, y como que el texto es transparente, los usuarios de este navegador verían solo el "panal" de fondo ( background-image:url(images/panal.jpg); ).

Hablemos de text-fill-color

La propiedad text-fill-color permite, exactamente como la propiedad color, especificar el color de relleno del texto. Si las dos propiedades están especificadas, la propiedad text-fill-color tendrá prioridad sobre la propiedad color.
En el siguiente ejemplo utilizamos la propiedad -webkit-text-fill-color que  tiene prioridad sobre la propiedad color solo en los navegadores basados en –webkit-. Firefox en cambio ignora las propiedades que tienen el prefijo –webkit-, y toma en consideración solo la propiedad color: exactamente lo que necesitamos.

NOTA: background-clip: text no funciona en Firefox.


h1#panal {
		font-family:"Arial Black", Gadget, sans-serif;
		font-size:85px;
    	background-image:url(images/panal.jpg);
    	-webkit-background-clip: text;
		color:Gold;
		-webkit-text-fill-color: transparent;
		text-align:center;
		margin:0;
		padding:0;
}


ABEJA

ABEJA