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

cssweb developmentfront end technology更新于 2024/10/31 22:04:17

您可能在网站上看到过以剪影形式播放的图像或视频。剪影可以是图像、物体、人物或动物，以黑色呈现，勾勒出主体的轮廓。我们可以在剪影中插入任何图像或视频，这样视频或图像就会以剪影的颜色显示。

在本文中，我们将了解如何在剪影中放置图像或视频。

如何在剪影中放置物体?

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

语法

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

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

mix-blend 模式的值包括 normal、multiply、screen 和 darken，每个值都会改变与其最近父元素的混合关系。让我们看一个例子来更好地理解这个 mix-blend 属性。

示例

在下面的例子中，我们创建了三个容器，并为它们赋予了三个不同的类。然后在 CSS 部分，我们更改了宽度、高度和 border-radius，使其变成圆形，然后更改了所有圆形的颜色。预期输出的代码如下 -

<!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 属性将上面的圆圈与两种不同的颜色混合在一起。

现在，我们已经了解了 mix-blend 模式属性的工作原理，我们将在轮廓中放置图像或视频，并确保拥有执行此操作所需的资源。让我们转到代码部分，了解如何将图像或视频插入轮廓。

示例

在此示例中，我们将使用 mix-blend 模式属性在轮廓图像中添加图像。

在此示例中，我们首先添加了一个轮廓图像，然后添加了要与之混合的图像。接下来，我们将它们括在 div 下，并为其指定一个类。之后，转到 CSS 部分，对我们添加的图像使用 mix-blend 模式属性，并将其值设置为 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.cainiaomax.com/static/images/banner-img.png?v=2.001" />
         <img src="https://www.cainiaomax.com/images/logo.png" />
      </div>
   </div>
</body>
</html>

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

注意 - 我们可以将 mix-blend 模式属性与文本、图像、SVG 一起使用，支持 mix-blend 模式属性的浏览器包括 Chrome、Edge、Safari、Firefox 等。