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

Home

Web Front-end

CSS Tutorial

Add a mask to an image using CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 pm 12:01 PM

使用 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;

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>

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>

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 id="This-is-an-example-of-the-mask-image-property">This is an example of the mask-image property</h1>
   <h3 id="We-are-using-the-gradient-value">We are using the gradient value</h3>
   <div class="mask2">
      <img  src="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/images/logo.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Add a mask to an image using CSS" >
   </div>
</body>
</html>

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!

Statement

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

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that