CSS Masking

FAQs.txt

Q.1) What is masked-image property ?
Answer: The mask-image property specifies the image to be used as a mask layer for an element.

Q.2) How can I use  a radial gradient of a particular shape as a masked layer?
Answer: You can use the following syntax to use a radial gradient as a masked layer, you can try diffrent shapes:
        .mask2 {
                   -webkit-mask-image: radial-gradient(square, black 50%, rgba(0, 0, 0, 0.5) 50%);
                   mask-image: radial-gradient(square, black 50%, rgba(0, 0, 0, 0.5) 50%);
               }

Q.3) What will happen if you skip assigning "no-repeat" value to mask-repeat property ?
Answer: The mask image will be repeated all over the image from which we are using as our layer image/ original image.

Q.4) Where can we use SVG<mask>?
Answer: The SVG <mask> element can be used inside an SVG graphic to create masking effects.


Q.5) What are diffrent CSS masking properties ?
Answer:
1) mask-image	Specifies an image to be used as a mask layer for an element.
2) mask-mode	Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask.
3) mask-origin	Specifies the origin position (the mask position area) of a mask layer image.
4) mask-position	Sets the starting position of a mask layer image (relative to the mask position area).
5) mask-repeat	Specifies how the mask layer image is repeated.
6) mask-size	Specifies the size of a mask layer image.

MCQs.txt

Q.1 Which value to use while passing the mask layer image ?
a) img()
b) image()
c) url()
d) mask()

Answer: c) url()

Q.2) What output the following syntax would give ?
      .mask1 {
                -webkit-mask-image: url(logo.png);
                 mask-image: url(logo.png);
                -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
             }
a) A masked logo image.
b) Other image masked with logo layer.
c) A repeated masked logo image.
d) None of the above.

Answer: a) A masked logo image.


Q.3) How can you use gradient as the mask layer ?
a) .mask {
             -webkit-mask-image: gradient(black, transparent);
              mask-image: gradient(black, transparent);
          }
          
b) .mask {
             -webkit-mask-image: linear-gradient(black, transparent);
              mask-image: linear-gradient(black, transparent);
          }
          
c) .mask {
             -webkit-mask-image: linear-gradient(black-transparent);
              mask-image: linear-gradient(black-transparent);
          }
          
d) .mask {
             -webkit-mask: linear-gradient(black, transparent);
              mask: linear-gradient(black, transparent);
          }

Answer: 
b) .mask {
             -webkit-mask-image: linear-gradient(black, transparent);
              mask-image: linear-gradient(black, transparent);
          }