Add a mask to an image using CSS-CSS Tutorial-php.cn

Add a mask to an image using CSS

WBOY

Release： 2023-09-04 12:01:02

forward

1576 people have browsed it

使用 CSS 添加遮罩到图像

We can place a layer over an element to partially or completely hide it. The mask-image attribute is a CSS attribute used to specify the layer on the element. It can also be an image, but we need to use the address of the image to add a mask to the image.

In this article, we will take a look at how to add a mask to an image using CSS properties and what more we can do with the same properties.

Add a mask to the image

mask-image attribute is the attribute we will use to add a mask on the desired image or text. This property adds a layer that can partially or completely hide the image. To better understand this property, let's take a quick look at the property's syntax.

grammar

mask-image: none, <image>, initial, inherit;

Copy after login

Use different values for the

mask-image property, the none value will not add a mask layer but will set a transparent black layer over the image or text. value can add a linear gradient mask. The initial value will set the attribute value to its default value, the inherited value will inherit the mask attribute of the nearest parent of the element using this attribute.

To better understand this property, we will use an example to learn more about how the value of the mask-image property works.

Example

In this example, we will use the value of and add the address of the image so that we can add a mask on the image.

Here, a container class is created and then go to the CSS part, in this part we first change the height and width and then use the mask attribute along with the image we want to print. Let's take a look at the output we get from the code.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the make-source property</title>
   <style>
      .contain { 
         width: 330px;
         height: 330px;
         background-image: url(
            "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg"
         );
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-position: center;
         -webkit-mask-box-image: url(https://www.tutorialspoint.com/images/logo.png);
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="contain"></div>
</body>
</html>

Copy after login

This is the output we are going to get, as you can see the image is now masked after using the mask-image attribute.

Now we will use the new property value in another example, so let's move to the next example.

Example

In this example, we will use the mask-image attribute and set its value to a linear gradient. Now, let’s move to the code to understand how this attribute works.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using mask-image property</title>
   <style>
      .container {
         height: 130px;
         width: 130px;
         background-image: url(
            "https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg");
         background-position: center;
         background-size: cover;
         -webkit-mask-image: linear-gradient(
            to top, transparent 19%, black 81%);
            background-repeat: no-repeat;
            mask-image: linear-gradient(
            to top, transparent 19%, black 21%
         );
      }
      body {
         background-color: white;
      }
   </style>
</head>
<body>
   <div class="container"></div>
</body>
</html>

Copy after login

In the above code, we first create a container and then change its height and width in the CSS section. After that, we added the image to which we want to apply the mask and set its value to a linear gradient using the mask-image property. We set the color black to 81% and transparent to 20%. Let's take a quick look at the code above.

In the example above, you can see that the image is transparent from the bottom, which means that the mask has been applied to the image.

Note - If we set the black value in the linear gradient to 100%, the image we have will be fully visible to the user, if we set the transparency to 100%, the image will be obscured The hood is completely hidden.

Example

In the example below, we change the value of the property to a radial gradient, which means that the mask will now be added in a circular form, the other components of the code are similar. Let us see the output we will get using the code below.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Another example for the image-mask property</title>
   <style>
      .mask2 {
         mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
         -webkit-mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0.5) 50%);
      }
   </style>
</head>
<body>
   <h1>This is an example of the mask-image property</h1>
   <h3>We are using the gradient value</h3>
   <div class="mask2">
      <img src="https://www.tutorialspoint.com/images/logo.png" width="600" height="400">
   </div>
</body>
</html>

Copy after login

When executing the above procedure, you can see that the mask appears in a circular form because some parts of the image are transparent and other parts are dark.

Why do we use the -webkit prefix?

We use the -webkit prefix because most browsers have only partial support for the masking functionality we use today. We use both the -webkit prefix and standard attributes for compatibility with all browsers.

in conclusion

Masks in CSS can partially or completely hide properties, depending on the values used with the property. Masks can be used like mask clips, mask images, mask modes, mask origins, etc. The masking property can set a mask on an image or text, and we can even change the shape of the mask we intend to apply. Masks are applied to images to make the user more immersive or to hide certain parts of the image.

The above is the detailed content of Add a mask to an image using CSS. For more information, please follow other related articles on the PHP Chinese website!