如何将图像或视频放在剪影中

你可能在某些网站上看到过图像或视频在剪影中播放的情况。剪影可以是图像、物体、人物或动物，以黑色表示，并形成主题的轮廓。我们可以在剪影中插入任何图像或视频，因此视频或图像将显示为剪影的颜色。

在本文中，我们将学习如何将图像或视频放在剪影中。

如何将对象放在剪影中

剪影是一个以纯色形式，如黑色或其他调色板颜色表示的对象或人物的图像。现在，我们要使用的属性是mix-blend属性，这个属性用于指定特定元素的内容将如何与其最近的父元素混合。

语法

下面是使用mix-blend属性的语法-

mix-blend mode: =darken,multiply,normal;

混合模式有normal、multiply、screen和darken等值，每种模式改变了它们与最近的父元素的混合关系。让我们通过一个示例来更好地理解这个mix-blend属性。

示例

在下面的示例中，我们创建了三个容器，并给它们分别添加了三个不同的类。然后在CSS部分，我们改变了它们的宽度、高度和边框半径，使它们呈现圆形，并改变了所有圆形的颜色。输出的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using the mix-blend property</title>
   <style>
      .round {
         border-radius: 50%;
         width: 79px;
         mix-blend-mode: screen;
         height: 79px;
         position: absolute;
      }
      .round-one {
         background: red;
      }
      .round-second {
         left: 38px;
         background: yellow;
      }
      .round-third {
         left: 19px;
         background: blue;
         top: 39px;
      }
      .iso {
         position: relative;
         Isolation: isolate;
      }
   </style>
</head>
<body>
   <div class="isolate">
      <div class="round round-one"></div>
      <div class="round round-two"></div>
      <div class="round round-third"></div>
   </div>
</body>
</html>

正如你所看到的，通过使用混合模式属性，我们将上面的圆与两种不同的颜色混合在一起。

现在，我们知道了混合模式属性的工作原理，我们将在剪影中放置一张图片或视频，并确保有所需资源进行操作。让我们来看看如何在代码部分插入图像或视频到剪影中。

示例

在这个示例中，我们将使用混合模式属性将一张图片添加到一个剪影图像中。

首先，我们添加了一个剪影图像，然后再添加我们要混合的图像。然后，我们把它们封装在一个 div 中，并给它们一个类名。接下来，我们进入 CSS 部分，然后对我们添加的图像使用混合模式属性，并将值设为“screen”。让我们来看看通过使用以下代码将获得的输出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of the silhoutte property</title>
   <style>
      .con {
         justify-content: center;
         display: flex;
         align-items: center;
      }
      body {
         min-height: 99vh;
      }
      .con .main {
         position: relative;
         width: 399px;
         margin: 48px;
         height: 399px;
      }
      * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
      }
      .con .main img {
         top: 0;
         left: 0;
         position: absolute;
         width: 98%;
         mix-blend-mode: screen;
         height: 99%;
         object-fit: cover;
         mix-blend-mode: screen;
      }
   </style>
</head>
<body>
   <div class="con">
      <div class="main">
         <img src="https://www.tutorialspoint.com/static/images/banner-img.png?v=2.001" />
         <img src="https://www.tutorialspoint.com/images/logo.png" />
      </div>
   </div>
</body>
</html>

您可以在上面的输出中看到，我们先添加了剪影图像，然后添加了另一个图像，当我们使用了混合模式属性时，图像与剪影混合在一起，使其看起来像是同一张图像，而不是两张不同的图像。

注意 −我们可以在文本、图像、SVG中使用混合模式属性，支持混合模式属性的浏览器是chrome、edge、safari、Firefox等。