Style filter အခြေအနေ

ဒီပုံစံ နှင့် အသုံးပြုခြင်း

filter ပုံပြင်တွင် ပုံမှား အကျုံး သို့မဟုတ် အေအိုင်ဂျူး စသည်တို့ အကျုံး ပြုလုပ်ပါ၏။

အခြား ကိုးကွယ်ချက်

CSS ဆိုင်ရာ ဆိုက်ကျမ်းfilter အခြေအနေ

အကျိုးဆက်

ပုံပြင်၏ အရောင်ကို အယ်လ်ဒီယို-အယ်လ်ဒီယို အထိ ပြောင်းလဲပါ (100% ဂါဇ်စတာ)

document.getElementById("myImg").style.filter = "grayscale(100%)";

ကျွန်ုပ်ကိုယ် ကျင့်ကတိပါ၏။

ပုံစံ

filter အခြေအနေ ကို ပြန်ကြားပါ၏။

object.style.filter

filter အခြေအနေ ကို ကိုင်တွယ်ပါ၏။

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filter ပြောင်းလဲပုံ

注释：ရူပိုင်းစံ ကို သုံးစွဲခြင်းဖြင့် filter ကို သုံးစွဲခြင်းမှာ ဝီကီဒီယို အချက်အလက် (ဥပမာ 75%) ကို လည်း ကိုင်တွယ်ပါ၏။

Filter ဖော်ပြခြင်း
none အကျုံး မရှိခြင်း ကို ကိုင်တွယ်ပါ၏။
blur(ပမာဏ)

ပုံပြင်တွင် အလွန်းဖြတ်စစ်ဆင်ခြင်း ထုတ်လုပ်ပါ၏။ အရွယ်အစား အကြီးမှာ အလွန်းဖြတ်စစ်ဆင်ခြင်း အများဆုံး ပြုလုပ်ပါ၏။

如果未规定值，则使用 0。
brightness(%)

调整图像的亮度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供更亮的结果。
contrast(%)

调整图像的对比度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供对比度较低的结果。
drop-shadow(h-shadow v-shadow blur spread color)

对图像应用投影效果。

可能的值：

h-shadow - 必需。规定水平阴影的像素值。负值将阴影放置在图像的左侧。

v-shadow - 必需。规定垂直阴影的像素值。负值将阴影置于图像上方。

blur - 可选。第三个值，须以像素为单位。为阴影添加模糊效果。较大的值会产生更多的模糊（阴影变得更大更亮）。不允许使用负值。如果未规定值，则使用 0（阴影的边缘是锐利的）。

spread - 可选。第四个值，须以像素为单位。正值会导致阴影扩大并变大，负值会导致阴影缩小。如果未规定，它将为 0（阴影将与元素大小相同）。

注释：Chrome、Safari 和 Opera，可能还有其他浏览器，不支持第 4 种长度；如果添加，它将不会呈现。

color：可选。为阴影添加颜色。如果未规定，颜色取决于浏览器（通常为黑色）。

提示：此 filter 类似于 box-shadow 属性。
grayscale(%)

将图像转换为灰度。

0% (0) 是默认值，表示原始图像。

100% 将使图像完全变灰（用于黑白图像）。

注释：အကျဉ်းချုပ် မပါဘဲ
hue-rotate(deg)

在图像上应用色调旋转。该值定义图像样本将被调整的围绕色环的度数。

0deg 是默认值，表示原始图像。

注释：最大值为 360 度。
invert(%)

反转图像中的样本。

0% (0) 是默认值，表示原始图像。

100% 将使图像完全反转。

注释：အကျဉ်းချုပ် မပါဘဲ
opacity(%)

设置图像的不透明度级别。不透明度级别描述了透明度级别，其中：

0% 是完全透明的。

100% (1) 是默认值，表示原始图像（无透明度）。

注释：အကျဉ်းချုပ် မပါဘဲ

提示：此 filter 类似于 opacity 属性。
saturate(%)

调整图像饱和度。

0% (0) 将使图像完全不饱和。

100% 是默认值，表示原始图像。

超过 100% 的值会提供过饱和的结果。

注释：အကျဉ်းချုပ် မပါဘဲ
sepia(%)

将图像转换为棕褐色。

0% (0) 是默认值，表示原始图像。

100% 会使图像完全呈棕褐色。

注释：အကျဉ်းချုပ် မပါဘဲ

နည်းပါးဆိုင်ရာ

CSS အပျက်အလက် CSS3

ဘတ်တာနာ အကူအညီ

အခြေခံ အချက်အလက် အမှတ်အသား သည် အားလုံး အပေါ် အထူး သိမ်းသွင်း သော အခြေခံ အချက်အလက် ကို ညွှန်ပြသည်။

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0