La tarea es definir el área de pintura del fondo. La propiedad CSS background-clip tiende a medir la victimización para delinear el área de pintura del fondo de cualquier página web. Especifica que en esa medida modificaremos el fondo de la página web en cuanto a sus contenidos o imágenes/videos que contiene.
Sintaxis:
background-clip: border-box/padding-box/content-box/initial/inherit;
Valores que contiene esta propiedad:
Hay medidas cuadradas principalmente cinco valores de esta propiedad para varias funciones y examinemos qué y cómo funcionan.
|
Valor |
Descripción |
| cuadro de borde | Este valor está disponible de forma predeterminada cuando no hay declaración, y especifica el área de pintura detrás del borde. |
| caja de relleno | Especifica que el espacio de pintura debe estar entre el borde, no sobre él. |
| cuadro de contenido | Especifica que el espacio de pintura debe estar únicamente entre el contenido que hemos escrito. |
| inicial | Cualquiera que sea el valor de la propiedad declarado anteriormente, simplemente lo establece de nuevo en su valor predeterminado, lo que sugiere que el valor del cuadro de borde . |
| heredar | Funciona porque tiene un nombre que hereda el espacio de pintura de su componente principal. |
Ejemplos:
- Usando valores de propiedad:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
/* This sets CSS property of the border to
be styled dashed and in green color with yellow
background having certain padding too */
border: 20px dashed green;
padding: 15px;
background: yellow;
}
</style>
</head>
<body>
<h1>Example for background-clip Property</h1>
<div style="background-clip: border-box;">
<!--This sets background-clip property to be border-box-->
<h4>This value is set by default also when there is
no declaration and it specifies the painting
area behind the border.</h4>
</div>
<p>background-clip: padding-box:</p>
<div style="background-clip: padding-box;">
<!--This sets background-clip property to be padding-box-->
<h4>It specifies the painting area to
be within the border not over it.</h4>
</div>
<p>background-clip: content-box:</p>
<div style="background-clip: content-box;">
<!--This sets background-clip property to be content-box-->
<h4>It specifies the painting g area to be only
within the content we have written.</h4>
</div>
</body>
</html>
Producción:
- Usando JavaScript para voltear los valores:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#GFG {
/* This sets CSS property of the div which id is GFG to
be styled dashed and in green color with black background
having certain padding with background-clip to be
border-box by default*/
width: 50%;
height: 400px;
padding: 15px;
background-color: black;
background-clip: border-box;
border: 20px dashed green;
}
</style>
</head>
<body>
<h1>Flip background-clip with JavaScript</h1>
<!--These buttons works as per the onclick function
given to it and display the content accordingly-->
<button onclick="myFunctionC()" style="width:200px;
height:50px;
background-color: black;
color:white">
Let's Change to content-box
</button>
<br><br>
<button onclick="myFunctionP()" style="width:200px;
height:50px;
background-color: black;
color:white">
Let's Change to padding-box
</button>
<br><br>
<button onclick="myFunctionI()" style="width:200px;
height:50px;
background-color: black;
color:white">
Let's back to initial
</button>
<br><br>
<div id="GFG">
</div>
<script>
/* These are the functions which will be triggered when the
corresponding button will be clicked and sets the
CSS background-clip property accordingly */
function myFunctionC() {
document.getElementById(
"GFG").style.backgroundClip = "content-box";
}
function myFunctionP() {
document.getElementById(
"GFG").style.backgroundClip = "padding-box";
}
function myFunctionI() {
document.getElementById(
"GFG").style.backgroundClip = "initial";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por KrishnaKripa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA