ການສະແດງການປິດກັບ CSS

ໃຊ້ CSS ການກວດກາ, ພວກເຮົາສາມາດສ້າງຊັ້ນການກວດກາຫລືສົ່ງຊັ້ນການກວດກາຫາສິ່ງທີ່ຈະຖອນສິ່ງບາງສ່ວນຫລືທັງໝົດຂອງສິ່ງ.

mask-image ປະເພດ

CSS mask-image ປະເພດທີ່ກ່ຽວກັບພາບການກວດກາຊັ້ນການກວດກາ.

ພາບການກວດກາອາດເປັນ PNG ພາບ, SVG ພາບ,CSS 渐变 ຫລື SVG <mask> ປະເພດ.

ການສະໜັບສະໜູນຂອງຄູ່ມູນຄ່າ

ໂຕລະດັບທີ່ກ່ອນຈາກສຽງແບບເປັນເກີບສຽງທີ່ສະໜັບສະໜູນຂອງການສະໜັບສະໜູນຂອງປະເພດນີ້ໃນການສະແດງ.

ມີ -webkit- ໂຕລະດັບທີ່ກ່ອນຈາກສຽງແບບເປັນເກີບສຽງທີ່ສົມບູນຂອງການສະໜັບສະໜູນ.

ໃຊ້ພາບເປັນຊັ້ນການກວດກາ

ເພື່ອໃຊ້ PNG ຫລື SVG ພາບໃຫ້ເປັນຊັ້ນການກວດກາ, ຕ້ອງໃຊ້: url() ຂະຫຍາຍພາບການກວດກາຫາຊັ້ນການກວດກາ.

ພາບການກວດກາຕ້ອງມີເຂດທີ່ສະຫລາກຫລືສະຫລາກເສຍສານ. ສີດຳແມ່ນສະຫລາກສົມບູນ.

ນີ້ແມ່ນພາບການກວດກາທີ່ພວກເຮົາຈະໃຊ້ (PNG ພາບ):

ນີ້ແມ່ນພາບທີ່ມາຈາກພັກພັນນະພາບອິຕາລີຫ້າເຂດນະພາບ:

ຕອນນີ້ພວກເຮົາຈະນຳໃຊ້ພາບການກວດກາ (PNG ພາບທີ່ກ່າວ) ໃຫ້ເປັນຊັ້ນການກວດກາຂອງພາບພັກພັນນະພາບທີ່ມີເຫລືອປະເທດອິຕາລີຫ້າເຂດນະພາບ:

ຄົນທີ່ຕິດຕາມ

以下是源代码：

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

Try It Yourself

例子解释

mask-image 属性指定用作元素遮罩层的图像。

mask-repeat 属性指定遮罩图像是否重复或如何重复。no-repeat 值表示遮罩图像不会重复（遮罩图像只会显示一次）。

另一个实例

如果我们省略 mask-repeat 属性，遮罩图像将重复显示在整个五渔村图像上：

ຄົນທີ່ຕິດຕາມ

以下是源代码：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Try It Yourself

使用渐变作为遮罩层

CSS 线性和径向渐变也可以用作遮罩图像。

线性渐变实例

在这里，我们使用线性渐变作为图像的遮罩层。此线性渐变从顶部（黑色）到底部（透明）：

ຄົນທີ່ຕິດຕາມ

使用线性渐变作为遮罩层：

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

Try It Yourself

在这里，我们使用线性渐变和文本遮罩作为图像的遮罩层：

ຄົນທີ່ຕິດຕາມ

ການນຳໃຊ້ສະພາບການສະຫຼອງວົງແລະການສະຫຼອງຂໍ້ຄວາມເພື່ອສະຫຼອງສະໝອງ:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Try It Yourself

ຄວາມຈຳນວນສະພາບການສະຫຼອງວົງ

ບ່ອນນີ້ພວກເຮົານຳໃຊ້ສະພາບການສະຫຼອງວົງຈາກພາບຫຼັງໄກຫຼັງການສະຫຼອງສະໝອງວົງ(ວົງບານ):

ຄົນທີ່ຕິດຕາມ

ການນຳໃຊ້ສະພາບການສະຫຼອງວົງຈາກພາບຫຼັງໄກຫຼັງການສະຫຼອງສະໝອງວົງ(ວົງບານ):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Try It Yourself

ພາຍໃນນີ້，ພວກເຮົາໃຊ້ການກະຈາຍຕົວວົງວຽນ (ຕົວປະກອບອອກຫວານ) ເພື່ອສ້າງການກະຈາຍຕົວຕ່າງໆຂອງບັນນາທິດ:

ຄົນທີ່ຕິດຕາມ

ໃຊ້ການກະຈາຍຕົວວົງວຽນອີກຢ່າງໜຶ່ງ (ຕົວປະກອບອອກຫວານ):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Try It Yourself

ໃຊ້ SVG ຄືການກະຈາຍຕົວ

SVG <mask> ເອວເມັດ ສາມາດໃຊ້ໃນ SVG ການກະຈາຍຕົວເພື່ອສ້າງຜົນກະຈາຍຕົວ:

ພາຍໃນນີ້，ພວກເຮົາໃຊ້ SVG <mask> ເອວເມັດ ເພື່ອສ້າງການກະຈາຍຕົວຕ່າງໆ:

ຄົນທີ່ຕິດຕາມ

ອີກຢ່າງໜຶ່ງ SVG ການກະຈາຍຕົວ (ຕົວປະກອບຕາມ):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Try It Yourself

ຄົນທີ່ຕິດຕາມ

ອີກຢ່າງໜຶ່ງ SVG ການກະຈາຍຕົວ (ຕົວປະກອບດາວ):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Try It Yourself

ຄົນທີ່ຕິດຕາມ

ອີກຢ່າງໜຶ່ງ SVG ການກະຈາຍຕົວ (ຕົວປະກອບວົງວຽນ):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Try It Yourself