စီစ်ဆိုင်ရာ လောကနိုင်ငံ လက်ရီချီသည်

အသုံးချက် နှင့် အပြုအရေး

filter အခြေအနေ အား အအုပ်အုပ် တွင် (အများအားဖြင့် <img>) ပုံစံ အကျိုးဆက် အထူး အတွက် (အသံထွက် နှင့် ပုံသွင် အစား) အား အသုံးပြုတယ်。

တီးပြီးမှတ်ချက်:

CSS ဖော်ပြချက်:CSS အရာတိုက်

HTML DOM ကိုးကွယ်မှု စာတမ်း:filter အခြေအနေ

အမျိုးအစား

အရာတိုက် အရောင်အသား အား အရောင်မမြတ် ပြုလုပ်တယ် (100% ဂရမ်ရှား):

img {
  filter: grayscale(100%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အကြိမ်ဖြူး:စက်ရုံး အောက်တွင် ပိုမို TIY အမျိုးမျိုး တွေ့ရပါတယ်。

စက်ရုံး ပုံစံ

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

အကြိမ်ဖြူး:如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。

技术细节

默认值： none
继承： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.filter="grayscale(100%)"

滤镜函数

မှတ်ချက်：使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜 描述
none 默认值。规定无效果。
blur(px)

对图像应用模糊效果。较大的值将产生更多的模糊。

如果为指定值，则使用 0。
brightness(%)

အရောင်အရွက် အလွယ်ကျ အပ်ဆိုသည်။

  • ၀％ အားဖြင့် အရောင်မပြုလုပ်ဘဲ အရောင်အော်ခရီး ပြုလုပ်သည်။
  • မြန်မာပြည် ပမာဏ ၁၀၀％ ဖြစ်သည်။ အရေးယူနိုင်သည်။
  • အကြီးအကျယ် ၁၀၀％ ပမာဏ အားဖြင့် အလွယ်ကျသည်။
contrast(%)

အရောင်အရွက် အတူကြားအရေး အပ်ဆိုသည်။

  • ၀％ အားဖြင့် အရောင်မပြုလုပ်ဘဲ အရောင်အော်ခရီး ပြုလုပ်သည်။
  • မြန်မာပြည် ပမာဏ ၁၀၀％ ဖြစ်သည်။ အရေးယူနိုင်သည်။
  • အကြီးအကျယ် ၁၀၀％ ပမာဏ အားဖြင့် အတူကြားအရေး အကြီးအကျယ် ပြုလုပ်သည်။
drop-shadow(h-shadow v-shadow blur spread color)

အရွက်အရွက် အပ်ဆိုသည်။

အခြား ပမာဏများ:

  • h-shadow - လိုအပ်သည်။ အရွက်အရွက် အချွန်းအချွန်း ပမာဏ ကို အပ်ဆိုသည်။ ဝေးသော ပမာဏ အားဖြင့် အရွက်အရွက် အော်ခရီး အခြေခံ ပြုလုပ်သည်။
  • v-shadow - လိုအပ်သည်။ အရွက်အရွက် အချွန်းအချွန်း ပမာဏ ကို အပ်ဆိုသည်။ ဝေးသော ပမာဏ အားဖြင့် အရွက်အရွက် အော်ခရီး ပြုလုပ်သည်။

blur - ဆိုင်းငံ့အရေးယူနိုင်သည်။ ဒါမှာ တတိယ အရာဖြစ်သည်။ ပမာဏ ကို ပမာဏ ပုံစံဖြင့် အပ်ဆိုသည်။ အရွက်အရွက် အချွန်းအချွန်း ပြုလုပ်ရန် အရွက်အရွက် အပ်ဆိုသည်။ ပမာဏ အကြီးအကျယ် အားဖြင့် အရွက်အရွက် ကြီးကြီး နှင့် အလွယ်ကျသည် (အရွက်အရွက် ကြီးကြီး နှင့် အလွယ်ကျ)။ ဝေးသော ပမာဏ မပြုလုပ်ဘဲ။ အပ်ဆိုသော် ၀ အပ်ဆိုသည် (အရွက်အရွက် အချွန်းအချွန်း အနည်းဆုံး)။

spread - ဆိုင်းငံ့အရေးယူနိုင်သည်။ ဒါမှာ တတိယ အရာဖြစ်သည်။ ပမာဏ ကို ပမာဏ ပုံစံဖြင့် အပ်ဆိုသည်။ ပမာဏ အကြီးအကျယ် အားဖြင့် အရွက်အရွက် ထွက်ပေါ်လာသည်။ ပမာဏ အနည်းဆုံးအားဖြင့် အရွက်အရွက် ကြီးသည်။ အပ်ဆိုသော် အရွက်အရွက် အချင်းအချင်း ၀ ဖြစ်သည် (အရွက်အရွက် အချင်းအချင်း တူညီသည်)။

မှတ်ချက်：Chrome, Safari နှင့် Opera, တောင်းမှာ အခြား ဘူးသတ္တုအရောင် ကို မကူညီဘဲ၊ အပ်ဆိုသော် မပြသပါ။

color - ဆိုင်းငံ့အရေးယူနိုင်သည်။ အရွက်အရောင် အပ်ဆိုသော် အရွက်အရောင် အပ်သည်။ အပ်ဆိုသော် ဘူးသတ္တုအရောင် အပ်သည် (အမျိုးသား အရောင်အော်ခရီး)။

ဒါက အရောင်အရွက် တစ်ခု ဖန်တီးကာ အရောင် အော်ခရီး နှင့် အခြေခံ စီးကား အရွက် ၈ပမာဏ နှင့် ၁၀ပမာဏ ရောင်ချွန်ထွက် အရွက် ပြုလုပ်သည်:

filter: drop-shadow(8px 8px 10px red);

အကြိမ်ဖြူး:ဤ ပုံစံ သည် box-shadow ပုံစံနှင့် ညီမျှ
grayscale(%)

ပုံကို အပိုင်းအဝါ သုံးစံသုံးပြီးသည်

  • 0% (0) သည် အခြေခံ ပုံကို ခေါ်ဆိုသည်
  • 100％ သည် ပုံကို အပိုင်းအဝါ ဖြစ်စေသည်

မှတ်ချက်：စက်တင်သင်္ကာရ အကျဆယ် မပါဘဲ
hue-rotate(deg)

ပုံ၏ အရောင်အခြောက်ကို အခြေခံ ပုံကို အာရုံကြောင်း အစား သုံးစံသုံးပြီးသည်

မှတ်ချက်：အမြင့် အခြေခံ 360deg
invert(%)

ပုံ၏ အစိတ်အပိုင်းကို အပြည့်တက် ဖြစ်စေသည်

  • 0% (0) သည် အခြေခံ ပုံကို ခေါ်ဆိုသည်
  • 100％ သည် ပုံကို အပြည့်တက် ဖြစ်စေသည်

မှတ်ချက်：စက်တင်သင်္ကာရ အကျဆယ် မပါဘဲ
opacity(%)

ပုံ၏ အကွဲဝေးအာရုံကို သတ်မှတ်ခြင်း

  • 0% သည် အပြည့်တက် ဖြစ်စေသည်
  • 100% (1) သည် အခြေခံ ပုံကို ခေါ်ဆိုသည်

မှတ်ချက်：စက်တင်သင်္ကာရ အကျဆယ် မပါဘဲ

အကြိမ်ဖြူး:ဤ ပုံစံ သည် opacity ပုံစံနှင့် ညီမျှ
saturate(%)

ပုံ၏ အထူးအရောင်အာရုံကို သတ်မှတ်ခြင်း

  • 0% (0) သည် ပုံကို အထူးအရောင် မပါဘဲဖြစ်စေသည်
  • 100% သည် အခြေခံ ပုံကို ခေါ်ဆိုသည်
  • 100% အထက်သော အသုံးစံများ အထူးအရောင်ကို ပိုမို ရောင်ရှိစေသည်

မှတ်ချက်：စက်တင်သင်္ကာရ အကျဆယ် မပါဘဲ
sepia(%)

ပုံကို အပိုင်းအဝါ သုံးစံသုံးပြီးသည်

  • 0% (0) သည် အခြေခံ ပုံကို ခေါ်ဆိုသည်
  • 100％ သည် ပုံကို အပိုင်းအဝါ ဖြစ်စေသည်

မှတ်ချက်：စက်တင်သင်္ကာရ အကျဆယ် မပါဘဲ
url()

url() သတင်းသုံးစံ သည် SVG လက်တင်ပုံစံများ၏ XML ဖိုင် ရှိရာနေရာကို ချိတ်ဆက်ပြီး ပိုမို လက်တင် ပုံစံ အဆိုပါ အစိတ်အပိုင်းကို ဆက်သွယ်နိုင်သည်။ အမှတ်အသား:

filter: url(svg-url#element-id);
initial အခြေခံ ပုံစံကို သုံးပြီးသည်။ ကျမ်းကို ကြည့်ရန် initial。
inherit ဖြစ်ပေါ်သော ပုံစံမှ အခြေခံအရ သုံးပြီးသည်။ ကျမ်းကို ကြည့်ရန် inherit。

ပိုမိုသုံးစံ

ပုံတူချွန်းချက်သုံးစံ

ပုံတူချွန်းချက်အာရုံကို ပြင်ဆင်ခ�င်း:

img {
  filter: blur(5px);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပုံတူချွန်းချက်သုံးစံ 2

ပုံတူချွန်းချက်ပုံကို အသုံးပြုခြင်း:

img.background {
  filter: blur(35px);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အရိယာအာရုံသုံးစံ

ရောင်ဆိုင်းအရိယာအာရုံကို ပြင်ဆင်ခ�င်း:

img {
  filter: brightness(200%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အာရုံသုံးစံ

ရောင်ဆိုင်းအာရုံကို ပြင်ဆင်ခြင်း:

img {
  filter: contrast(200%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ရောင်ဆိုင်းသုံးစံ

ရောင်ဆိုင်းကို ယူးယျယ်ရိုက်ချီခြင်း:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အရောင်အဆင်း အမှတ်အသား

ပုံ ကို အရောင်အသား အဆင်း အသုံးပြုပါ

img {
  filter: grayscale(50%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အရောင်ဆင်း အမှတ်အသား

ပုံ ပေါ်တွင် အရောင်ဆင်း ပြုလုပ်ပါ

img {
  filter: hue-rotate(90deg);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပြန်ပြ အမှတ်အသား

ပုံ အတွင်း အနောက်တန်း ကို ပြန်ပြစ်ပါ

img {
  filter: invert(100%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အခွဲ အမှတ်အသား

ပုံ အသား အခွဲအပေါ် အခြေအနေ ကို ကြိုးစားပါ

img {
  filter: opacity(30%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပေါက်ကြောင်း အမှတ်အသား

ပုံ အသား ကို ကြိုးစားပြုပါ

img {
  filter: saturate(800%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပေါက်ကြောင်း အမှတ်အသား

ပုံ ကို ပေါက်ကြောင်း အသုံးပြုပါ

img {
  filter: sepia(100%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပုံစံများ ပေါင်းစပ်အသုံး

အသုံးပြုသော ပုံစံများကို ပေါင်းစပ်ကြည့်ပါ၊ အထူးသဖြင့် အမှားပါက ဖြစ်ပေါ်နိုင်သည် (ဥပမာ၊ sepia() နောက် grayscale() ကို အသုံးပြုလျှင် အရောင်အများ မပါဘဲ ရှိသော ပုံ ကို ပြုလုပ်လိမ့်မည်)။

img {
  filter: contrast(200%) brightness(150%);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပုံစံ အားလုံး

ပုံစံ အားလုံး ပြသပါ

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ဘူးသတ္တု ထောက်ပံ့

တင်ပြထားသော နေရာများ သည် အကျယ်အဝန်း ထောက်ပံ့ထားသော အချက်အလက် ကို အသုံးပြုသော ပထမဆုံး ဘူးသတ္တု ကန်းနှင်း ကို ဖော်ပြသည်။

နှင့် -webkit- ပါသော နေရာများ သည် ပြီးမြောက်သော ကန်းနှင်း ကို အသုံးပြုသော ပထမဆုံး ကန်းနှင်း ကို ကိုးကွယ်သည်။

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

မှတ်ချက်：အက်တိုန်း အင်တာနက် အော်ဂန်တာ ကို ပြောင်းလဲခဲ့သော တူညီခြင်း "filter" အချက်အလက် ကို ထောက်ပံ့ကြသော ကျယ်ပြန့်သော အင်တာနက် အော်ဂန်တာ ကို အသုံးပြုသည် (4.0 နှင့် 8.0)။ အက်ဘ်အီ 8 နှင့် နည်းပါးသော ကန်းနှင်းကို ထောက်ပံ့သင့်ကြောင်း လိုအပ်ခါနီးဖြစ်လျှင်၊ အသုံးပြုသည်မှာ ကွဲယိုးအောင်အောင်ခြင်း ဖြစ်သည်။