စက်စုံ စာရွက် ပိတ်ပျက်

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;
}

亲自试一试

例子解释

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

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

另一个实例

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

အကျိုးသမား

以下是源代码：

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

亲自试一试

使用渐变作为遮罩层

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

线性渐变实例

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

အကျိုးသမား

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

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

亲自试一试

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

အကျိုးသမား

အနောက်ခံရိုက်တိုးဖြည့်တင်ကြောင်း နှင့် စာသင်္ကေတ အပုံအချုပ် အပိုင်းစိတ်များကို ပိတ်ထိန်းရန် သုံးကြသည်:;

.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);
}

亲自试一试

ပြိုကွဲတည်ရှိသော အနောက်ခံရိုက်တိုးဖြည့်တင်ကြောင်း အမှတ်အသား

ဒီနေရာမှာ သင်တော်သည် ပြိုကွဲတည်ရှိသော အနောက်ခံရိုက်တိုးဖြည့်တင်ကြောင်း (အရုပ်အချုပ်အပုံ) ကို ပုံမျက်နှာ၏ အပုံအချုပ် အပိုင်းစိတ်များကို ပိတ်ထိန်းရန် သုံးကြသည်:;

အကျိုးသမား

အနောက်ခံရိုက်တိုးဖြည့်တင်ကြောင်းများကိုသုံးကာ ပြိုကွဲတည်ရှိသော အပုံအချုပ် (အရုပ်အချုပ်) အနောက်ခံရိုက်တိုးဖြည့်တင်ကြောင်းများကို သုံးကြသည်:;

.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%);
}

亲自试一试

အခါတွင် ကျွန်ုပ်တို့ နီးပါး အာနက်အာကား ပုံဖော်ပြချက် (အပုံဆုတ်ပုံ) အသုံးပြုခြင်းဖြင့် ယူဆောင်သုံးပြီး ဖြစ်သည့် ပုံဖော်ပြချက် ကို ဖွင့်ပြခဲ့တယ်။

အကျိုးသမား

အခါတွင် ကျွန်ုပ်တို့ နီးပါး အနည်းငယ် အာနက်အာကား ပုံဖော်ပြချက် (အပုံဆုတ်ပုံ) အသုံးပြုခြင်းဖြင့် ယူဆောင်သုံးပြီး ဖြစ်သည့် ပုံဖော်ပြချက် ကို ဖွင့်ပြခဲ့တယ်။

.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%);
}

亲自试一试

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>
  
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>

亲自试一试

အကျိုးသမား

နီးပါး SVG ဖော်ပြချက် (အပုံကြောင်းပုံ)

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

亲自试一试

အကျိုးသမား

နီးပါး SVG ဖော်ပြချက် (အပုံဖြူဖြူ)

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    
    
  
  

亲自试一试