အိမ်ခြံမြေ css "င့်လင်းမြင်သာ" - ဆိုက်ကပိုစိတ်ဝင်စားဖို့ဒီဇိုင်းလုပ်မယ့်ရိုးရှင်းတဲ့လမ်း

ယနေ့က်ဘ်ဆိုက်ဒီဇိုင်းဖန်တီးမှုတစ်ခုအနုပညာပုံစံဖြစ်လာသည်။ ဒါကအခြို့သောအရောင်နဲ့စာမျက်နှာဒြပ်စင်ရုံစုတခုမဟုတျပါဘူး အရွယ်အစား, ဖောင့် ကွဲပြားခြားနားသောစတိုင်များနှင့်အကြောင်းအရာအလိုက်ပန်းချီကားများ၏။ အခြားသူများမှသင်၏ site ကိုကွဲပြားခြားနားစေရန်ဧည့်သည် '' အာရုံကိုဆွဲဆောင်ဖို့နဲ့အချို့သောဒြပ်စင်များကညွှန်ကြားနိုင်ရန်အတွက်နည်းလမ်းများနှင့်ကိရိယာများ၏ကြီးမားသောအရေအတွက်အားကိုအသုံးပြုခဲ့သည်။ လင်းမြင်သာမှု - ထိုသူတို့တွင်အလွန်လူကြိုက်များပိုင်ဆိုင်မှု css ရှိသေး၏။ ဒီနည်းပညာအတော်လေးဖက်ရှင်နှင့်အောင်မြင်ကျော်ကြားပြီးဆွဲဆောင်မှုရှိတဲ့လူငယ်လေးတွေဖြစ်တယ်, ဒါကြောင့်မကြာခဏအသုံးပြုသည်။ ဥပမာ, စာသားပိတ်ပင်တားဆီးမှုသို့မဟုတ်မြေတပြင်လုံးရုပ်ပုံလွှာ - င့်လင်းမြင်သာဆိုက်၏ကွဲပြားခြားနားသောအရာဝတ္ထုစာမျက်နှာများကိုပေးနိုင်ပါသည်။ ဒါဟာအစကွဲပြားခြားနားတဲ့နည်းလမ်းတွေထဲမှာအောင်မြင်။ ကျွန်တော်တို့ကိုအောကျတှငျသူတို့ကိုဆနျးစစျကွပါစို့။

parameters င့်လင်းမြင်သာ၏ဒြပ်စင်ကိုသတ်မှတ်

အတော်ကြာ၏ဒြပ်စင်များ၏င့်လင်းမြင်သာထိန်းညှိဖို့ parameters ။ သူတို့ကသီးခြားရည်ရွယ်ချက်များအဖြစ်ကို "ပြုပြင်" ဒီဇိုင်းအောက်၌ရှိသောဘရောက်ဇာ, ပေါ် မူတည်. အသုံးပြုကြသည်။ ဤရွေ့ကားအောက်ပါဂုဏ်သတ္တိများပါဝင်သည်:

• opacity ကို;
• filter ကို;
• တစ်ဦးနောက်ခံအဖြစ် PNG-image ကို။

မြင့်သူအရေအတွက်သည်ဒြပ်စင်၏င့်လင်းမြင်သာ၏အောက်ပိုင်းအဆင့်အောက်ပါအတိုင်းအဖြစ်အိမ်ခြံမြေတန်ဖိုးက css "င့်လင်းမြင်သာ" ပြောင်းလဲသွားတယ်နေကြသည်။ 10 ကနေ 100 မှထိုနာက် Interet Explorer browser ကို, လူအပေါင်းတို့သည်အခြားသက်ဆိုင် opacity ကိုပိုင်ဆိုင်မှုအတွက်အသုံးပြုသည် - opacity ကိုက filter ကိုအတွက်ပါ 0 င်ကနေ 1 ကွဲပြားခြားနားသည်။

လင်းမြင်သာမှုပုံရိပ် (အပြောင်းအလဲများ)

သငျသညျပစ္စည်းရွှေ့တဲ့အခါမှာပွင့်လင်းပေါ်လာပါလိမ့်မယ်သောရွေးချယ်မှုများနှင့်အတူစတင်ဖွင့်ကြစို့ mouse ကိုဆွဲသည်။

ကိုပုံရိပ်၏င့်လင်းမြင်သာသတ်မှတ်ဖို့ဘယ်လိုထည့်သွင်းစဉ်းစားကြပါစို့။ CSS ကို options နှစ်ခုပေးထားပါတယ်။ အောက်မှာဖေါ်ပြတဲ့အတိုင်းဒီလိုလုပ်ဖို့, သင်ကုဒ် html-စာရွက်စာတမ်းတွင်တိုက်ရိုက်ပါကမှတ်ပုံတင်ရန်ရမယ်:

1. ပုံသဏ္ဍာန်လမ်းကြောင်း Specify ။
2. ညွှန်းမြားမပါသောအခါကျနော်တို့င့်လင်းမြင်သာ၏ parameters တွေကို define ။ ဒီလိုလုပ်ဖို့ကျနော်တို့ onmouseover နှင့် onmouseout, opacity ကို၏တန်ဖိုးပြဋ္ဌာန်းထားတဲ့နှင့် filter ကို၏ဂုဏ်သတ္တိများကိုအသုံးပြုပါ။

တူညီသောသွင်ပြင်လက္ခဏာများကတစ်ဦးကိုကိုးကားထည့်သွင်းဖို့ css-စာရွက်စာတမ်းနှင့် source code ကိုအတွက်သတ်မှတ်ထားသောနိုင်ပါသည်။ ရလဒ်အတူတူထွက်လှည့်။

စာသားနဲ့စာမျက်နှာလုပ်ကွက်၏င့်လင်းမြင်သာ

စာသားသို့မဟုတ်ပိတ်ပင်တားဆီးမှု (ပွင့်လင်း div) အတွက်အမျှ css တစ်ပွင့်လင်းပုံရိပ်ဖန်တီးဆင်တူသည်၎င်း၏ option ကိုကမ်းလှမ်း, သင်အလိုရှိသော parameters တွေကိုချမှတ်ထားတဲ့အတွက်ချိတ်ဆက် css-ဖိုင်, သုံးစွဲဖို့ရှိသည်။ သငျသညျကိုသွားပြီးရိုးရှင်းတဲ့လမ်းနိုင်ပါတယ်။ သင်စတိုင်လ်ပိတ်ပင်တားဆီးမှု div style သို့မဟုတ်စာသား p ထားသောအခါမှ onmouseover နှင့်ဒြပ်စင် onmouseout အောက်ပါ html-code ကိုသတ်မှတ်။ နှစ်ဦးစလုံးအတွက်ရွေးချယ်စရာများအလုပ်မလုပ်ခြင်းနှင့်လိုချင်သောရလဒ်ထုတ်လုပ်ရန်။

လင်းမြင်သာမှုစဉ်ဆက်မပြတ်

အချို့ကိစ္စများတွင်တစ်ခုအရာဝတ္ထုများ၏င့်လင်းမြင်သာတဲ့ဒီဇိုင်းဒြပ်စင်သို့မဟုတ်စာသားတခုကိုသင်ဆက်လက်ဖြစ်ပွားနေသောအခြေခံပေါ်မှာတင်ထားရန်အလိုရှိ၏။ ဤအခြေအနေ၌, ဖြေရှင်းချက်ကိုသင် mouse ကို cursor ပျံဝဲသည့်အခါထက်ပင်ရိုးရှင်းတဲ့ဖြစ်ပါတယ်။

မြင်သာမှုအတွက် css ဒြပ်စင်အောက်ပါ code ကပေးလိမ့်မည်။ ပိတ်ပင်တားဆီးမှု div style အတွက်နောက်ခံများအတွက်တန်ဖိုးများ (ဥပမာ, # ff8800), opacity ကို (ဥပမာ, 0.5) နှင့်အကျယ် (width ကို) နှင့် padding ကို (padding ကို) သတ်မှတ်။

image ကိုကုဒ်တန်ဖိုးများ for အောင်နှင့် opacity ကို filter ကို, ထိုပုံရိပ်မှလမ်းကြောင်းကိုသတ်မှတ်နေကြသည်။

RGBA-နည်းလမ်း

ဒီပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု css ကိုအသုံးပြုပြီးအခြားရွေးချယ်စရာရှိပါတယ်: င့်လင်းမြင်သာမဆိုဒီဇိုင်းကိုဒြပ်စင်များ၏အခြေစိုက်စခန်းအရောင်မှလျှောက်ထားနိုင်ပါသည်။ ဒါဟာ RGBA နည်းလမ်းကိုအသုံးပြုသည်။ လင်းမြင်သာမှုရဲ့အဆင့်ကိုသတ်မှတ်ပေးသော alpha, - ပထမသုံးအက္ခရာများအခြေခံအရောင်များကို (အနီ, fission, အပြာ) နှင့်နောက်ဆုံးအဘို့အရပ်တယ်။ RGBA-format ကိုအသုံးပြုခြင်းကနောက်ဆုံးဂဏန်းကညွှန်ပြ, မြင်သာပြဌာန်းထားပြီးဖြစ်ပါသည်။ ဥပမာအားဖြင့်, အဖြစ်: နောက်ခံ: RGBA (240,2,33,0.4035) ။

ကောက်ချက်

ထို့ကြောင့်ဆိုက်ဒီဇိုင်းရိုးရှင်းတဲ့ပေမယ့်ထိရောက်တဲ့အင်္ဂါရပ် css "င့်လင်းမြင်သာ" ပေါ်တွင်အလုပ်၏သင်တန်းကို အသုံးပြု. , သင်အနည်းငယ်မျှသာအားထုတ်မှုနှင့်အတူကပိုပြီးစိတ်ဝင်စားဖို့နှင့်ပိုပြီးသိသာဒြပ်စင်စေနိုင်ပါတယ်။ အဆိုပါဖော်ပြထားဂျထုံးစံင့်လင်းမြင်သာ features တွေဒီအားဖြင့်သင်တို့ကိုကူညီပေးပါမည်ဖြစ်ပါသည်။