CSS ရုပ်ပုံ-တင်ဆက်ခြင်း ပိုင်ဆိုင်မှု
ဥပမာ
ပုံစကေးချဲ့ရန်အတွက် အသုံးပြုနိုင်သော မတူညီသော algorithms ကိုပြပါ-
.image {
height: 100px;
width: 100px;
image-rendering: auto;
}
.crisp-edges {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.pixelated {
image-rendering: pixelated;
}
.smooth {
image-rendering: smooth;
}
.high-quality {
image-rendering: high-quality;
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် image-rendering
ပုံစကေးချဲ့ရန်အတွက် အသုံးပြုမည့် algorithm အမျိုးအစားကို သတ်မှတ်ပေးပါသည်။
မှတ်ချက်- ဤပိုင်ဆိုင်မှုသည် စကေးမချထားသော ပုံများပေါ်တွင် သက်ရောက်မှုမရှိပါ။
မူလတန်ဖိုး: | အော်တို |
---|---|
အမွေဆက်ခံသည်- | ဟုတ်တယ် |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JJavaScript အထားအသို- | အရာဝတ္ထု .style.imageRendering="pixelated" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
image-rendering | 41.0 | 79.0 | 65.0 | 10.0 | 28.0 |
crisp-edges
Chrome၊ Edge၊ Opera နှင့် Safari တို့သည် တန်ဖိုး အတွက် အခြားအမည်တစ်ခုကို အသုံးပြုသည် - -webkit-optimize-contrast
။
CSS Syntax
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
auto | Let the browser choose the scaling algorithm. This is default |
smooth | Use an algorithm that smooth out the colors in the image |
high-quality | Same as smooth, but with a preference for higher-quality scaling |
crisp-edges | Use an algorithm that will preserve the contrast and edges in the image |
pixelated | If the image is scaled up, the nearest-neighbor algorithm is used, so the image will appear as being composed of large pixels. If the image is scaled down, it will be the same as auto |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |