CSS 如何在剪影内放置图像或视频

你可能遇到过一些网站，在这些网站上你可能看到一个图像或视频被播放成剪影。剪影可以是一个图像，一个物体，一个人或一个动物，用黑色表示，它使主体的轮廓。我们可以在剪影中插入任何图像或视频，这样视频或图像就会以剪影的颜色显示。

在这篇文章中，我们将看一下如何将图像或视频放在剪影中。

如何将物体放在剪影内

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

语法

以下是使用混合混合属性的语法：

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

混合混合模式有正常、倍增、屏幕和变暗等值，它们中的每一个都会改变与它们最近的父级的混合关系。让我们看一个例子来更好地理解这个混合混合的属性。

示例

在下面的例子中，我们创建了三个容器，然后给它们三个不同的类。然后在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部分，然后在我们添加的图像上使用混合混合模式属性，并将其值设置为屏幕。让我们看看使用下面的代码将得到的输出。

<!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>

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

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