Saber2pr's Blog

MaskMask

Mask-image

Specify a picture as the mask.

e mask means that the two pictures are stacked on top of each other. The position of the transparent part of the mask becomes white, and the position of the white part shows the base image.

Can be used with css gradient diagrams, for example:

#scroll {
  mask-image: linear-gradient(
    to right,
    transparent,
    white 10px,
    white 90%,
    transparent
  );
}

Means to add a mask to the # scroll element. The gradient from left to right starts with transparency, white at 10px90%, and transparent color at the far right. The effect is to show semi-hidden at the left and right ends of the scroll, which is used to indicate that there is overflow content. You can see the effect on the home page (adjust the resolution to the mobile end): View the effect