[CSS] mask mask

 Out of curiosity about why the video at station b does not block the characters, I checked the relevant pictures and related documents, and found that the picture is a mask layer similar to a PS:

 

How did this picture come from? It must be recognized and generated by AI. A picture is only one or two kilobytes. Loading many pictures at a time will not cause a lot of burden. To find documents, the following attributes are mainly used:

Detailed related mark attributes:

 

• It can be used to hide or partially hide the visible area of ​​an element, similar to the mask concept in PS
• for masks
  • If the element adds a mask attribute, then the target element will be displayed according to the shape of the mask
    • When masking a transparent area, the element will also be transparent, that is, the area is hidden
  • Typically, a mask can be a transparent image or an element with a gradient
• Attribute value:
  • mask-image
  • mask-repeat
  • mask-position
  • mask-clip
  • mask-origin
  • mask-size
  • mask-mode
  • mask-composite

Several common attributes

（1）mask-image

• mask-imageIndicates the use of image resources as a mask

  • The default value is none, that is, no mask image
  • Use url()to import image resources, the same as the import method of background images
    • The imported image resources can be .jpg, .png, .svgetc.
    • Note that linear-gradientthe generated gradient is also a kind of image, so you can also use the gradient as a mask

• example description

  • First draw a grid background with transparent areas using a linear gradient

    .bg {
        background-image: linear-gradient(
            to top,
            #000 0%,
            #000 50%,
            transparent 50%,
            transparent 100%
        ),
            linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);
        background-size: 50px 50px;
    }
    复制代码

  • Then apply this gradient to the element's mask-imageattribute

  .spider {
      border: 1px dashed #ccc;
      -webkit-mask-image: linear-gradient(
          to top,
          #000 0%,
          #000 50%,
          transparent 50%,
          transparent 100%
      ),
          linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);
      -webkit-mask-size: 50px 50px; /* 这个属性用于控制遮罩图层的大小，在后面会介绍 */
  }
  复制代码

（2）mask-repeat

• mask-repeatRepresents a repeated mask, and the effect background-repeatis similar to that of the background attribute

  • Attribute value:
    • repeat: default value, means repeat
    • repeat-x: Indicates to repeat in the horizontal direction
    • repeat-y: Indicates to repeat vertically
    • no-repeat: Indicates no repetition
    • space: Indicates tiling
    • round: means try to get close together

• example description

  • Find a circular picture here as a mask

    .spider1 {
        -webkit-mask-image: url('./mask.ico');
        -webkit-mask-repeat: repeat; /* 默认值，表示重复 */
    }
    .spider2 {
        -webkit-mask-image: url('./mask.ico');
        -webkit-mask-repeat: no-repeat; /* 表示不重复 */
    }
    复制代码

    

（3）mask-position

• mask-positionAttributes behave similarly to attributes background-positionand are used to control where the mask is applied

  • Attribute value:
    • Keywords: top, bottom, left, right,center
      • If there is only one keyword, the default keyword iscenter
    • Values: %, px, em, remetc.
    • The default is 0% 0%, i.e. upper left corner

• example description

  .spider1 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: right;
  }
  .spider2 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: left;
  }
  复制代码

  

（4）mask-clip

• mask-clipThe performance of is also background-clipsimilar to that of
  • Attribute value:
    • content-box、padding-box、border-box
    • fill-box、stroke-box、view-box
    • no-clip
  • This attribute needs to be matched with the relevant attributes of the box model to see the effect, such as margin, paddingetc.

（5）mask-origin

• mask-originbackground-originUsed to set the starting position of the mask, which behaves like presentation and
  • The main attribute values ​​are:
    • content-box、border-box
    • margin-box、padding-box
    • fill-box、stroke-box、view-box
  • This attribute needs to be matched with the relevant attributes of the box model to see the effect, such as margin, paddingetc.

（6）mask-size

• mask-sizeUsed to control the size of the image, its effect and behavior are background-sizesimilar to

  • Attribute value:
    • keywords:
      • contain: Make the picture fully fit into the element area, ensure that the shortest side can be fully displayed, and the remaining part will be automatically repeated to fill, and the original aspect ratio of the picture will be maintained
      • cover: Make the image completely cover the background area, ensure that the longest side can completely fill the element area, and keep the original aspect ratio of the image
      • auto: adaptive
    • Value: %, em, px,rem

• sample code

  .spider1 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
  }
  .spider2 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: cover;
  }