CSS | Propiedad de clip de fondo

La propiedad background-clip en CSS se usa para definir cómo extender el fondo (color o imagen) dentro de un elemento.

Valor por defecto:

cuadro de borde

Sintaxis:

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

El valor de la propiedad:

border-box: la propiedad border-box se utiliza para establecer el color de fondo distribuido en toda la división.

Sintaxis:
```
background-clip: border-box;
```

Ejemplo:

html

<!DOCTYPE html>
<html> 
    <head> 
        <title>Border Box</title> 
        <style> 
            .gfg { 
                background-color: green; 
                background-clip:border-box; 
                text-align:center;
                border:10px dashed black;
            } 
        </style> 
    </head> 
      
    <body> 
        <div class = "gfg"> 
            <h2>
                GeeksforGeeks
            </h2> 
            <p>
                background-clip: border-box;
            </p>
        </div> 
    </body> 
</html>                            

Producción:

padding-box: la propiedad padding-box se usa para establecer el fondo dentro del borde.

Sintaxis:
```
background-clip:padding-box;
```

Ejemplo:

html

<!DOCTYPE html>
<html> 
    <head> 
        <title>padding-box property</title> 
        <style> 
            .gfg { 
                background-color: green; 
                background-clip:padding-box;
                padding: 25px;
                border: 10px dashed black;
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
      
        <div class = "gfg"> 
            <h2>
                GeeksforGeeks
            </h2> 
            <p>
                background-clip: padding-box;
            </p>
        </div> 
    </body> 
</html>                    

Producción:

cuadro de contenido: la propiedad del cuadro de contenido se usa para establecer el color de fondo solo para el contenido.

Sintaxis:
```
background-clip:content-box;
```

Ejemplo:

html

<!DOCTYPE html>
<html> 
    <head> 
        <title>content-box property</title> 
        <style> 
            .gfg {
                background-color: green; 
                background-clip:content-box;
                padding: 15px;
                border: 10px dashed black;
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
      
        <div class = "gfg"> 
            <h2>
                GeeksforGeeks
            </h2> 
            <p>
                background-clip: content-box;
            </p>
        </div> 
    </body> 
</html>                            

Producción:

inicial: Es el valor por defecto. Se utiliza para establecer la distribución del color de fondo en toda la división.

Sintaxis:

background-clip:initial-box;

Ejemplo:

html

<!DOCTYPE html>
<html> 
    <head> 
        <title>Initial</title> 
        <style> 
            .gfg { 
                background-color: green; 
                background-clip:initial;
                padding: 15px;
                border: 10px dashed black;
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center"> 
      
        <div class = "gfg"> 
            <h2>
                GeeksforGeeks
            </h2> 
            <p>
                background-clip: initial;
            </p>
        </div> 
    </body> 
</html>

Producción:

Navegador compatible: los navegadores compatibles con la propiedad background-clip se enumeran a continuación:

Google Chrome 4.0
Internet Explorer 9.0
Firefox 4.0
Ópera 10.5
Safari 3.0

Publicación traducida automáticamente

Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

html

html

html

Deja una respuesta Cancelar la respuesta