DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
19-01-2015

La propiedad background-clip en CSS es una de las propiedades que controlan los fondos de los elementos HTML; esta propiedad permite especificar comportamientos sobre el fondo (compuesto por un color y/o imagen) como si debe mostrar detrás de su borde o no, o simplemente si debe de abarcar solo la sección del contenido.

Valores admisibles por la propiedad background-clip

Valor Descripción
border-box (Por defecto) El fondo (background) es cortado es el borde del contenedor; en otras palabras, el fondo del elemento es visible tanto en el contenido como en el borde.
padding-box El fondo (background) no es incluido (no es visible) en el borde del contenedor; en otras palabras, el fondo sólo es comprendido por el espacio compuesto por el borde exterior del padding.
content-box El fondo (background) es visible en el contenedor dependiendo del contenido que haya en el mismo; en otras palabras, el fondo se muestra desde el inicio del contenido.
inherit Toma el valor establecido en el padre.

Usando el valor border-box

Definición del HTML

<div>El color del fondo (azul) se muestra inclusive detrás de su borde</div>

Definición del CSS

            #ejemplo2{
                background-clip: border-box; 
               /*resto del CSS*/
            }
El color del fondo (azul) se muestra inclusive detrás de su borde amarillo

Usando el valor padding-box

Definición del HTML

<div>El color del fondo (azul) no se muestra detrás de su borde amarillo, solo en el espacio comprendido por el borde exterior del padding.</div>

Definición del CSS

            #ejemplo2{
                background-clip: padding-box; 
               /*resto del CSS*/
            }
El color del fondo (azul) no se muestra detrás de su borde amarillo, solo en el espacio comprendido por el borde exterior del padding del contenedor.

Usando el valor content-box

Definición del HTML

<div>El color del fondo (azul) solo se muestra en el espacio comprendido por el borde exterior del padding del contenido.</div>

Definición del CSS

            #ejemplo2{
                background-clip: content-box; 
               /*resto del CSS*/
            }
El color del fondo (azul) no se muestra detrás de su borde amarillo, solo en el espacio comprendido por el borde exterior del padding.

Comparación entre los distintos valores de la propiedad background-clip

Finalmente veamos una comparación entre los distintos valores de la propiedad background-clip:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Calendario de cubo

Calendario de cubo

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015

Construyendo nuestro propio logo Android con SVG en HTML

Construyendo nuestro propio logo Android con SVG en HTML

En esta entrada abordaremos un tema un poco más práctico y veremos cómo construir nuestro propio logo de Android empleando lo hablado hasta el momento.

Andrés Cruz 21-05-2015

Animando cosas con CSS: Creando una luna

Animando cosas con CSS: Creando una luna

En esta entrada veremos cómo crear una Luna la cual estará compuesta por su halo, cráteres, fases y un cielo estrellado.

Andrés Cruz 29-10-2015