En este artículo, aprenderemos cómo colocar una imagen o video dentro de una silueta usando CSS. Antes de eso, tengamos una breve definición de silueta. Es básicamente una imagen de cualquier persona, animal o podría ser cualquier objeto representado por una paleta sólida de color. En general, es de color negro. Básicamente, lo que vamos a hacer en este artículo, colocaremos o insertaremos cualquier imagen o video deseado y luego lograremos un efecto para que nuestra imagen se muestre solo en el color sólido de Silhouette. Podemos hacer esto muy fácilmente con una propiedad CSS simple que se llama mix-blend-mode .
Para colocar cualquier imagen o video dentro de la silueta, asegúrese de tener los archivos de imagen y video requeridos y la silueta donde los colocaremos. Comencemos con un proceso paso a paso.
Ejemplo: Cree un archivo HTML y agregue la siguiente línea de código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"/>
<title>Image inside the Silhouette</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container .main {
position: relative;
width: 400px;
height: 400px;
margin: 50px;
}
.container .main img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210723124629/gfg-200x200.png"/>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210723162735/pattern1-300x295.png"/>
</div>
</div>
</body>
</html>
Salida: En este caso, podemos ver que la forma elegante se usa como una imagen de silueta. Entonces, así es como podemos agregar imágenes a una silueta. Ahora, para agregar video o gif, no necesitamos hacer ningún trabajo adicional, solo tenemos que agregar más HTML y CSS al archivo existente.
