La función element() de CSS se usa para colocar la imagen en una etiqueta de otro elemento presente en la página. La imagen muestra cambios a medida que los cambios se realizan en otro elemento HTML.
Sintaxis:
element(id)
Parámetros: esta función toma la identificación del elemento HTML.
Nota: esta función no funciona con la etiqueta de clase y ejecute el código en Firefox.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
color: #fff;
font-size: 20px;
}
.container{
padding:10px;
width:fit-content;
height:auto;
background:-moz-element(#bg1);
}
#bg1{
text-align: center;
width:fit-content;
height:300px;
background-image:url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200714125445/b-300x173.JPG");
}
</style>
<body>
<div class="container">
Text from container
</div>
<div style="overflow:hidden; height:0;
width:fit-content;">
<div id="bg1">Text from bg1</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Mozilla Firefox
- Firefox para Android