Home > Article > Web Front-end > How to place an image or video inside a silhouette?

How to place an image or video inside a silhouette?

王林forward: 2023-09-12 17:29:021288browse

You may have seen images or videos played in silhouette on some websites. A silhouette can be an image, object, person or animal and is represented in black, outlining the subject. We can insert any image or video in the silhouette so that the video or image will appear in the color of the silhouette

In this article we will learn how to place an image or video into a silhouette.

How to place an object inside an outline?

A silhouette is an image of an object or person represented by a solid shape in black or any other palette color. Now, the attribute we are going to use here is going to be the mix-blend attribute, which specifies how the content of a particular element is blended with its nearest parent element.

grammar

The following is the syntax for using the mix-blend attribute -

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

Blending Blend modes have values such as Normal, Multiply, Screen, and Darken, each of which changes the blending relationship with its nearest parent. Let's look at an example to better understand this blending property.

Example

In the example below, we create three containers and then provide three different classes for them. Then in the CSS section we changed the width and height and the border radius to make it a circle, and then changed the color of all the circles. The expected output code is as follows -

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

As you can see, by using the mix-blend property, we are blending the above circle with 2 different colors.

Now that we know how the blend mode attribute works, we will place an image or video within the silhouette and make sure we have the resources we need to do so. Let's look at the code section and see how to insert an image or video in the silhouette.

Example

In this example we will add an image in a silhouette image using the Blend Blend Mode property.

Here we first added the silhouette image and then the image we want to blend. Next, we wrap them under a div and give them a class. After that go to the CSS section and use the mix-blend mode property on the image we added and set the value to screen. Let us see the output we will get using the following code.

<!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" / alt="How to place an image or video inside a silhouette?" >
         <img  src="https://www.tutorialspoint.com/images/logo.png" / alt="How to place an image or video inside a silhouette?" >
      </div>
   </div>
</body>
</html>

You can see in the output above that we added the silhouette image and then another image and when we use the Blend Blend Mode property the image blends with the silhouette and it looks like it is the same image instead of 2 different images.

Note - We can use the mixed blend mode attribute for text, images, and SVG. Browsers that support the mixed blend mode attribute include chrome, edge, safari, Firefox, etc. p>

in conclusion

The silhouette effect can be used to make a website more interactive and attractive, and can be done using just a single property in CSS, the mix-blend property, which defines how content blends with its nearest parent and parent level background.

In this article we saw how to put an image or video into a silhouette using some CSS properties such as the Blend Blend Mode property.

The above is the detailed content of How to place an image or video inside a silhouette?. For more information, please follow other related articles on the PHP Chinese website!

firefox css chrome safari edge 封装对象

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Show overflowing content when hovering over element using CSSNext article：Show overflowing content when hovering over element using CSS

See more

How to place an image or video inside a silhouette?

How to place an object inside an outline?

grammar

Example

Example

in conclusion

Related articles