CSS3 မထင်ရှားသောအကြောင်းလေ့လာပါ

သင်၏နောက်ခံ Transparent Making

သင်အလွယ်တကူ Web ပေါ်ရှိပုံနှိပ်ဒီဇိုင်းကိုပြုကြသော်လည်းမနိုငျသောအရာတစျခုမှာပုံရိပ်တစ်ခုသို့မဟုတ်ရောင်စုံနောက်ခံပေါ်တွင်ပြသမှုကိုစာသားဖြစ်ပြီး, စာသားနောက်ခံသို့်လည်းကြွေတတ်ကြောင်းဒါကြောင့်ပုံရိပ်၏င့်လင်းမြင်သာပြောင်းပေးပါ။ သို့သော်တစ်ဦးပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုလည်းမရှိ CSS3 opacity ကို: သူတို့နှင့်ထွက်လည်းညှိုးနွမ်းသို့မှသာသင်သည်သင်၏ဒြပ်စင်၏ opacity ကိုပြောင်းလဲပစ်ရန်ခွင့်ပြုလိမ့်မည်။

opacity ကိုအိမ်ခြံမြေအသုံးပြုနည်းကိုဘယ်လို

opacity ကိုပိုင်ဆိုင်မှု 0.0 ကနေ 1.0 မှင့်လင်းမြင်သာမှုပမာဏ၏တန်ဖိုးကြာပါသည်။

0.0 ပွင့်လင်း-ဘာမှကြောင်းဒြပ်စင်အောက်တွင်ဖော်ပြထားသော 100% လုံးဝမှတဆင့်ကိုပြသပါလိမ့်မယ်ဖြစ်ပါတယ်။ 1.0 ဒီလိုပါပဲ-ဘာမျှ၎င်းဒြပ်စင်ကိုအောက်တွင် 100% မှတဆင့်ကိုပြသပါလိမ့်မယ်ဖြစ်ပါတယ်။

ဒါကြောင့် 50% ပွင့်လင်းဖို့က Element ကိုတင်ထားရန်, သငျသညျကိုရေးမယ်လို့:

opacity ကို: 0.5;

အရေးယူအတွက် opacity ကိုအချို့ဥပမာကိုကြည့်ပါ

အသက်ကြီး browser မှာစမ်းကြည့်ဖို့သေချာတာပေါ့ Be

IE ကို 6 မဟုတ်သလို 7 မ CSS3 opacity ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုထောကျပံ့။ သင်တို့မူကားကံထဲကမဟုတ်ပါဘူး။ အဲဒီအစား, IE ကိုတစ်ဦး Microsoft ကသာပိုင်ဆိုင်မှု alpha filter ကိုထောက်ခံပါတယ်။ IE ကိုအတွက် alpha filter များ 0 (လုံးဝပွင့်လင်း) မှ 100 အထိ (လုံးဝဒီလိုပါပဲ) မှတန်ဖိုးများကိုလက်ခံပါ။ ဒါကြောင့်, IE ကိုသင်၌င့်လင်းမြင်သာရဖို့, သင်ပေါင်း 100 အားဖြင့်သင့် opacity ကိုများပြားနှင့်သင့်စတိုင်များတစ်ခု alpha filter ကိုထည့်ပါမယ်:

filter ကို: alpha (opacity ကို = 50);

အရေးယူအတွက် alpha filter ကို (သာ IE) ကိုကြည့်ပါ

နှင့် Browser ကိုပုဒ်ကိုသုံးပါ

အဟောင်းတွေကို Mozilla ၏မူကွဲနှင့် Webkit browser များလွန်းပါကထောကျပံ့ပေးနိုင်အောင်သင်က -moz- နှင့် -webkit- ရှေ့ဆက်အသုံးပွုသငျ့:

-webkit-opacity ကို: 0.5;
-moz-opacity ကို: 0.5;
opacity ကို: 0.5;

အမြဲတမ်းပထမဦးဆုံး browser ကိုရှေ့ဆက် ထား. , နောက်ဆုံးကတော့တရားဝင် CSS3 property က။

အဟောင်းတွေ Mozilla နဲ့ Webkit browser များအတွက် browser ကိုရှေ့ဆက်စမ်းသပ်။

သငျသညျလှနျး Images ကို Transparent Make နိုင်သလား

image ကိုသူ့ဟာသူအပေါ် opacity ကို Set ကနောက်ခံသို့လည်းညှိုးနွမ်းပါလိမ့်မယ်။ ဤသည်တို့အတွက်အမှန်တကယ်အသုံးဝင်သည် နောက်ခံပုံရိပ်တွေ ။

သင်တစ်ဦးကျောက်ဆူး tag ထဲမှာ add လျှင်သင်သည်ဖန်တီးနိုင်ပါတယ် မောက်စ်တင်သက်ရောက်မှု ရုံပုံရိပ်၏ opacity ကိုပြောင်းလဲနေတဲ့ဖြင့်ပြုလုပ်နိုင်ပါတယ်။

တစ်ဦး: မောက်စ်တင် img {
filter ကို: alpha (opacity ကို = 50)
filter ကို: progid: DXImageTransform.Microsoft.Alpha (opacity ကို = 50)
-moz-opacity ကို: 0.5;
-webkit-opacity ကို: 0.5;
opacity ကို: 0.5;
}

ဒီ HTML ကိုသာသက်ရောက်သည်:

အရေးယူအတွက်အထက်စတိုင်များနဲ့ HTML စမ်းသပ်။

သင့်ပုံများပေါ်တွင်စာသားထားရ

opacity ကိုနှင့်အတူသငျသညျပုံတစ်ပုံကျော်ကစာသားနေရာနိုင်ပြီး image ကိုစာသားသည်အဘယ်မှာရှိထွက်လည်းညှိုးနွမ်းဖို့ပေါ်လာပါပြီ။

သောတစျခုလုံးကိုပုံရိပ်ညှိုးနွမ်းလိမ့်မယ်သကဲ့သို့သငျရိုးရှင်းစွာ, image ကိုညှိုးနွမ်းလို့မရပါဘူးဘာဖြစ်လို့လဲဆိုတော့ဒီနည်းပညာအနည်းငယ်လှည်ဖြစ်ပါတယ်။ တဖန်သင်တို့လည်းညှိုးနွမ်းမနိုင် စာသား box ကို စာသားအဖြစ်ကောင်းစွာရှိလည်းညှိုးနွမ်းလိမ့်မယ်ဘာဖြစ်လို့လဲဆိုတော့။

1. ပထမဦးစွာသင်တစ်ဦးကွန်တိန်နာ div ဖန်တီးအတွင်းပိုင်းသင့်ရဲ့ image ကိုနေရာ:

   
   

2. တစ်ဦးအချည်းနှီးသော div -this အတူပုံရိပ်ကို Follow သငျသညျပွင့်လင်းစေပါလိမ့်မယ်အရာဖြစ်တယ်။

   
   
   

3. သင်သည်သင်၏ HTML မှာ add နောက်ဆုံးအရာအထဲတွင်သင်၏စာသားနှင့်အတူ div ဖြစ်ပါသည်:

   
   
   
   ဤသူကားငါ၏ခွေး Shasta ဖြစ်ပါတယ်။ သူကချစ်စရာမဟုတ်ပါ!

4. သင်က image ကိုအပေါ်ကစာသားကိုနေရာ, CSS ကို positioning ကိုအတူက style ။ ငါသည်လက်ဝဲဘက်မှာငါ့အကိုစာသားထားရှိသော်လည်း, သင်သည်နှစ်ခုလက်ဝဲပြောင်းလဲနေတဲ့အားဖြင့်ညာဘက်အပေါ်ကထည့်ထားနိုင်ပါတယ်: 0; ညာဘက်ဂုဏ်သတ္တိများ: 0; ။

   #image {
   အနေအထား: ဆွေမျိုး;
   width: 170px;
   အမြင့်: 128px;
   margin: 0;
   }
   #text {
   အနေအထား: အကြွင်းမဲ့အာဏာ;
   ထိပ်တန်း: 0;
   left: 0;
   width: 60px;
   အမြင့်: 118px;
   နောက်ခံ: #fff;
   padding ကို: 5px;
   }
   #text {
   filter ကို: alpha (opacity ကို = 70);
   filter ကို: progid: DXImageTransform.Microsoft.Alpha (opacity ကို = 70);
   -moz-opacity ကို: 0,70;
   opacity ကို: 0.7;
   }
   #words {
   အနေအထား: အကြွင်းမဲ့အာဏာ;
   ထိပ်တန်း: 0;
   left: 0;
   width: 60px;
   အမြင့်: 118px;
   နောက်ခံ: ပွင့်လင်း;
   padding ကို: 5px;
   }

ဒါကြောင့်မြင်တွေ့ရပုံကိုကြည့်ပါ