How to place an image or video inside a silhouette?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to place an image or video inside a silhouette?

王林

Sep 12, 2023 pm 05:29 PM

How to place an image or video inside a silhouette?

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="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/static/images/banner-img.png?v=2.001?x-oss-process=image/resize,p_40"  class="lazy" / alt="How to place an image or video inside a silhouette?" >
         <img  src="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/images/logo.png?x-oss-process=image/resize,p_40"  class="lazy" / 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!

Statement

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

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Building an Ethereum app using Redwood.js and FaunaMar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum