CSS ကိုနောက်ခံင့်လင်းမြင်သာ။ CSS နဲ့ transparent နောက်ခံသို့မဟုတ်စာသား

ဝဘ်ဒီဇိုင်နာများနညျးလမျးမြားစှာမှာအလုပ်မလုပ် CSS3 ၏ထွန်းပိုမိုလွယ်ကူနှင့်ပိုပြီးယုတ္တိဖြစ်လာသည်နှင့်အတူ: ပြီးနောက်ရှိသမျှတို့, ယခုသင်တကယ်ပြင်သာပြောင်းသာလျော့နည်းမကြာခဏ JavaScript ကိုအသွင်ရောက်အောင်ကြိုးစားကြ, မည်သည့်အရာဝတ္ထုကိုစိတ်ကြိုက်နိုင်ပါတယ်။ သင်ဟာနောက်ခံ၏င့်လင်းမြင်သာချိန်ညှိဖို့လိုအပျလို့ပွောကွပါစို့ - CSS ကိုချက်ချင်းအများအပြားရွေးချယ်စရာပေးထားပါတယ်။

attribute တွေအစုတခုအားဖြင့်သတ်မှတ်နောက်ခံသမိုင်း (Background-image ကို, နောက်ခံ-အနေအထား , နောက်ခံ-size, နောက်ခံ-ထပ်, နောက်ခံ-attachment ကို, နောက်ခံ-ဇာစ်မြစ်, နောက်ခံ-ကလစ်, နောက်ခံ-အရောင်), attribute မှာအောက်တွင်သီးခြားတာဝန်ပေးသို့မဟုတ်ပေါင်းစပ်နိုင်ပါတယ်အသီးအသီးသောအ နောက်ခံ။ ကျွန်တော်တို့ကိုအသေးစိတ်အတွက်သူတို့ထဲကတစ်ဦးချင်းစီဆန်းစစ်ကြပါစို့။

background-color attribute

CSS မှာ နောက်ခံအရောင် နည်းလမ်းများစွာအတွက်သတ်မှတ်ထားနိုင်ပါတယ်: တစ် hex code ကို, အရောင်အမည်သို့မဟုတ် RGB-entry ကိုသုံးနိုင်သည်။ CSS3 ထဲမှာ RGBA တစ်ခုနဲ့ RGB-မှတ်တမ်းတင် option ကိုအစားသုံးစွဲဖို့ဖြစ်နိုင်သမျှဖြစ်လာခဲ့သည်။

background-color: # FFDAB9 hex အရောင်ကုဒ်ဟာရာဇမတ်ကွက်ပြီးနောက်အိမ်ခြံမြေတှငျမှတျတမျးတငျထားသနေသည်။ ဒီ entry အတွက်ဇာတ်ကောင်အတူတူအားလုံးမှန်လျှင်, code ကိုများသောအားဖြင့်အနည်းငယ်ဖြတ်ဖြစ်ပါသည်: # ccff00 # cf0 အဖြစ်စာဖြင့်ရေးသားနိုင်ပါတယ်:

ခန္ဓာကိုယ် {background-color: # cf0 ;} ။

နာမတျောအပင်အများဆုံးထူးခြားဆန်းပြားအရောင်ဖြစ်ပါသည်။ ဥပမာ, စံအနီရောင်နဲ့အဖြူရောင်အပြင်၌သငျ NavajoWhite (#FFDEAD) သို့မဟုတ် Honeydew2 (# E0EEE0) ကိုသုံးနိုင်သည်

ခန္ဓာကိုယ် {background-color: ခရမ်းရောင်; } ။

အဆုံးစွန်သော option ကို RGB သို့မဟုတ် RGBA entry ကိုသငျသညျအရောငျဒါပေမယ့်လည်း CSS ကိုနောက်ခံ၏င့်လင်းမြင်သာသာသတ်မှတ်ခွင့်ပြုတာဖြစ်ပါတယ်, သို့သော်နည်းလမ်းသာ 9 ထက်အသက်ကြီး IE ကိုဗားရှင်းမှာအလုပ်လုပ်နေပါတယ်။ တခြား browser င့်လင်းမြင်သာအတူပုံမှန်ဗားရှင်းကိုအသိအမှတ်မပြု။ အဆိုပါ W3C စံချိန်စံညွှန်းများအရပြုလုပ်မယ့်အစားပိုပြီးပုံမှန်အတိုင်း RGB ၏နေဆဲ RGBA သုံးစွဲဖို့ပိုကောင်းပါတယ်။

RGBA နောက်ခံနောက်ဆုံးတန်ဖိုးနှင့် 1 (ဒီလိုပါပဲ) မှ (ပွင့်လင်း) 0 ကနေ opacity ကိုသတ်မှတ်။

အချို့သောပုံမှန်မဟုတ်သောတန်ဖိုးများရှိပါတယ်။ နောက်ခံအရောင်ဟာ HSL နှင့် HSLA အသုံးပြု. သတ်မှတ်နိုင်ပါသည်။ နှစ်ဦးစလုံး CSS3 မှဆက်ပြောသည်ခဲ့ကြသည်, ဒါကြောင့် IE ကိုဗားရှင်း 9 သို့မဟုတ်မြင့်မားသောအားဖြင့်ထောက်ခံကြသည်မဟုတ်။ တစ်ခုသာကွဲပြားခြားနားသောပုံစံဂျတူညီ RGB သို့မဟုတ် RGBA: Hue (အရိပ် - အရောင်ဘီးအပေါ်တန်ဖိုးဒီဂရီ၌ပေးသောဖြစ်ပါတယ်), Saturation (ရွှဲ - 0 ကနေ 100 ရာခိုင်နှုန်းအဖြစ်အရောင်ပြင်းထန်မှု,), Lightness (လျှပ် - အရောင်အဝါ, တိုင်းတာအလားတူ Saturation parameterized ) ။

နောက်ခံ-image ကို attribute

ယင်းပွင့်လင်းနောက်ခံအရှိဆုံး Cross-browser ကိုဗားရှင်း - ဒီပုံရိပ်ကို၏အသုံးပြုမှုသည်။ သငျသညျ ပို. ပင်ပုံရိပ်တွေသတ်မှတ်နိုင်သည် CSS3 ခုနှစ်တွင်, ဤတစ်ကော်မာမှတဆင့်ပြုသောအမှုဖြစ်ပါတယ်။ ဥပမာ:

{background-ခန္ဓာကိုယ်ပုံရိပ်ကို: url (bg1.png), url (bg2.png)} ။

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

နောက်ခံ-အနေအထား attribute

သငျသညျနောက်ခံယူနစ်ကိုတင်ထားရန် image ကိုအသုံးပြုပါက, CSS ကိုသင်ဘယ်နေရာမှာမဆိုမျက်နှာပြင်ပေါ်တွင်ပုံရိပ်နေရာချခွင့်ပြုပါတယ်။ ပုံမှန်အားဖြင့် image ကိုအထက်လက်ဝဲဘက်ထောင့်တွင်တည်ရှိသည်။ attribute နှုတ်ညွှန်ကြားချက် (ထိပ်, အောက်ခြေ, left, ညာ), တစ်ဂဏန်း (အကျိုးစီးပွား, pixels ကိုများနှင့်အခြားယူနစ်) တစ်ခုခုကိုကြာပါသည်။ ဤကိစ္စတွင်ခုနှစ်, သငျသညျအလျားလိုက်နှင့်ဒေါင်လိုက်နှစ်ခုတန်ဖိုးများကို, ကိုသတ်မှတ်ရမည်ဖြစ်သည်:

body {background-position: လက်ျာဘက်အလယ်ဗဟို ;} - ဒီဥပမာထဲမှာ, ပုံစံစာမျက်နှာ၏လက်ျာဘက်၌တည်ရှိပါလိမ့်မည်, တူညီတဲ့ဖို့ပုံရိပ်အကွာအဝေး၏အပေါ်ဆုံးနဲ့အောက်ဆုံး။

နောက်ခံ-size ကို attribute

တခါတရံက CSS ကိုနောက်ခံဆန့်သို့မဟုတ်၎င်း၏အရွယ်အစားလျှော့ချဖို့လိုအပ်ပေသည်။ ဒီလိုလုပ်ဖို့ attribute မှာနောက်ခံ-size ကိုအသုံးပြုခြင်းနှင့်နောက်ခံ၏အရွယ်အစားကို pixel သို့မဟုတ်ရာခိုင်နှုန်းနှင့်အခြားမည်သည့်ယူနစ်အတွက်သတ်မှတ်နိုင်ပါသည်။

အသုံးပြုရရန် browser ကိုရှေ့ဆက်၏အစောပိုင်းဗားရှင်းအတွက်နောက်ခံ၏မှန်ကန်သော display ကိုများအတွက်: ဤ attribute ကိုနှင့်အတူအချို့သောပြဿနာများရှိပါသည်။ ဟုတ်ပါတယ်, လက်ရှိ version ကိုအပြည့်အဝဒီ attribute ကိုထောကျပံ့များနှင့်သီးခြားဂုဏ်သတ္တိများဘို့လိုအပ်ကြောင်းပျောက်ကွယ်သွားသည်။

နောက်ခံ-attachment ကို attribute

scrolling စဉ်ဤ attribute ကိုနောက်ခံပုံရိပ်တွေ၏အပြုအမူကိုသတ်မှတ်ပါတယ်။ ဒါကြောင့် (အအမွေခံအပါအဝင်မဟုတ်, ဤဆောင်းပါးတွင်ဆွေးနွေး attribute တွေအားလုံးအတှကျစုစုပေါငျး) 3 တန်ဖိုးများကိုယူနိုင်သည်

• fixed - fixed ၏နောက်ခံပေါ်ရှိပုံစေသည်;
• scroll - ဒြပ်စင်၏ကျန်နှင့်အတူနောက်ခံကျမ်းလိပ်များ;
• ဒေသခံ - scrolling မအကြောင်းအရာများရှိပါတယ်လျှင်နောက်ခံပေါ်တွင်ပုံရိပ် scrolled ဖြစ်ပါတယ်။ frame ရဲ့ contents တွေကိုကျော်လွန်တတ်ကြောင်းနောက်ခံ fixed ဖြစ်ပါတယ်။

အသုံးပြုမှုဥပမာ:

ခန္ဓာကိုယ် {fixed နောက်ခံ-attachment ကို} ။

လောလောဆယ် Firefox ကို (ဒေသခံ) ကိုပြီးခဲ့သည့်ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုထောကျပံ့မပေးပါဘူး။

နောက်ခံ-မူလအစ attribute

ဤသည် attribute က positioning ကိုဒြပ်စင်အဘို့အတာဝန်ရှိသည်။ အစောပိုင်း browser များရှေ့ဆက်၏အသုံးပြုမှုကိုလိုအပ်သည်။ အဆိုပါပိုင်ဆိုင်မှုသူ့ဟာသူသုံး parameters များကိုရှိပါတယ်:

• အကောင့်ထဲသို့ frame ရဲ့အထူယူပြီးစဉ် padding ကို-box ကိုအစွန်းပုံစံမှဆွေမျိုး positioned လျက်ရှိ၏
• ယခင်ကနေမတူညီတဲ့နယ်စပ်-box ကိုဂုဏ်သတ္တိများနယ်နိမိတ်မျဉ်းကိုလုံးဝဖြစ်သို့မဟုတ်တစ်စိတ်တစ်ပိုင်းပုံစံထပ်နိုင်မပြခြင်း,
• အကြောင်းအရာ-box ကို positioning ကို image ကိုသူ့ရဲ့အကြောင်းအရာကို pryavyazyvaya ။

သငျသညျမျိုးစုံတန်ဖိုးများကိုသတ်မှတ်လျှင်, browser များမိမိတို့ကိုယ်ပိုင်လမ်းအတွက်တုံ့ပြန်နိုင်သည် Firefox နှင့်အော်ပရာကိုသာပထမဦးဆုံး option ကိုရိပ်မိရ။

နောက်ခံ-ထပ် attribute

နောက်ခံပုံရိပ်သတ်မှတ်ထားသောလျှင်စည်းကမ်းအတိုင်း, ကအလျားလိုက်သို့မဟုတ်ဒေါင်လိုက်ထပ်ခါတလဲလဲရမည်ဖြစ်သည်။ ဒီအဘို့နှင့် attribute ကိုနောက်ခံ-ထပ်ကိုအသုံးပြုခဲ့သည်။ ထို့ကြောင့်ပိတ်ပင်တားဆီးမှုနောက်ခံ, ထိုကဲ့သို့သောအိမ်ခြံမြေများ CSS ကိုတော်တော်များများ parameters များကိုတစ်ဦးရှိနိုင်ပါသည်:

• အဘယ်သူမျှမ-ထပ် - image ကိုတစ်ခုတည်းဗားရှင်းအတွက်စာမျက်နှာပေါ်;
• ပြန်လုပ်ပါ - နောက်ခံအဆိုပါ X နဲ့ Y အတွက်ထပ်ခါတလဲလဲလျက်ရှိ၏
• ပြန်လုပ်-x ကို - သာအလျားလိုက်;
• ပြန်လုပ်-y က - သာဒေါင်လိုက်;
• အာကာသ - နောက်ခံထပ်ခါတလဲလဲ, ဒါပေမယ့်အာကာသပုံအကြားဖြည့်ဖို့မဖြစ်နိုင်တဲ့လျှင်အချည်းနှီးပေါ်လာသဖြင့်,
• ပတ်ပတ်လည် - ကတပြင်လုံးကိုပုံတစ်ခုလုံးဧရိယာဖြည့်မပါဘူးဆိုရင် image ကို, ပြခဲ့သည်ဆို၏ဖြစ်ပါတယ်။

အဆိုပါ attribute တွေ၏ဥပမာ:

body {background-repeat: no- ထပ်ထပ်} - အလားတူနောက်ခံ-ထပ်: ပြန်လုပ်-y က။

ကော်မာကွဲကွာ parameters တွေကို, စာရင်းလာသောအခါ CSS3 ခုနှစ်တွင်မျိုးစုံပုံရိပ်တွေများအတွက်တန်ဖိုးများကိုသတ်မှတ်ရမည်။

နောက်ခံ-ကလစ် attribute

ဤသည် attribute ကို (ဥပမာ, အတွေက dotted ဘောင်၏ဖြစ်ရပ်မှာ) နယ်နိမိတ်အောက်မှာနောက်ခံ၏အပြုအမူကိုသတ်မှတ်ပါတယ်:

• padding ကို-box ကို - ထိုဘလောက်၏အတွင်းပိုင်းတွင်ပြသနောက်ခံ;
• နယ်စပ်-box ကို - image ကိုမူဘောင်အောက်တွင်ကြွလာ;
• အကြောင်းအရာ-box ကို - နောက်ခံပေါ်ရှိပုံကိုသာအကြောင်းအရာအတွင်းမှာပေါ်လာပါလိမ့်မယ်။

အသုံးပြုမှုဥပမာ:

body {background-ကလစ်: content- သေတ္တာ;} ။

Chrom နှင့် Safari -webkit- ရှေ့ဆက်လိုအပ်သည်။

opacity attribute တွေနှင့်စစ်ထုတ်ကိရိယာများ

opacity ကို attribute ကိုသင်နောက်ခံ၏င့်လင်းမြင်သာမသတ်မှတ်ခွင့်ပြု - CSS ကိုပိုင်ဆိုင်မှုအားလုံး browser များအတွက်အလုပ်လုပ်ပါလိမ့်မယ်။ တန်ဖိုး 0.0 ကနေအားလုံးပါဝင်နိုင် 1.0 ရန်အကွာအဝေးကိုထားခြင်းဖြစ်သည်။ ဤကိစ္စတွင်ခုနှစ်, သင် CSS ကိုနောက်ခံ၏င့်လင်းမြင်သာသတ်မှတ်နိုင်သည် အစား 0.3 မရှိ integer ဖြစ်တဲ့အတွက်တန်ဖိုးအား .3 ရေးသားဖို့လုံလောက်ပါတယ်:

.block {background-image: url ( img.png); opacity ကို: .3;} ။

နောက်ခံ opacity ကိုတင်ထားရန်, CSS ကိုစစ်ထုတ် attribute ကိုသုံးပါပင်နဝမဗားရှင်းကိုအောက်တွင် IE ကိုသင့်လျော်သည်:

.block {background-image: url ( img.png); filter ကို: alpha (opacity ကို = 30)} ။

opacity ကိုသုံးပြီးနောက်ခံ, ဒါပေမယ့်လည်းယူနစ်အတွင်းမှအပေါငျးတို့သ element တွေကိုသာရှင်းရှင်းလင်းလင်းဖြစ်လာသည့်အခါ: ဤကိစ္စတွင်ခုနှစ်, opacity ကိုတန်ဖိုး opacity ကို RGBA အမွေဥစ္စာကိုမှတဆင့်ကွဲပြားခြားနားသောင့်လင်းမြင်သာ settings ကို attribute တစ်ခုကို 0 င်နှင့် 100 မှတ်ချက်အကြားသတ်မှတ်ထားသည်။

အမြဲတမ်း CIS browser များအပေါင်းတို့နှင့်အခြားနိုင်ငံများအဘို့သင့်ပါသည်စာရင်းဇယားစောင့်ကြည့်။ အားလုံး DTP ၏အကြီးမားဆုံးပြဿနာ - IE ကို၏ဗားရှင်းအဟောင်း, သူတို့သင်အပြည့်အဝအတိုင်းအတာ CSS3 သုံးစွဲဖို့ခွင့်မပြုပါဘူး။ အပြင်အဆင်အတွက်သင့် browser ကိုမဆို CSS ကိုပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကိုထောက်ပံ့ခြင်းရှိမရှိစစ်ဆေးသောအထူးဝန်ဆောင်မှုများကိုသုံးစွဲဖို့မေ့လျော့ကြပါဘူး။ သငျသညျဘရောက်ဇာ၏ဗားရှင်းအဟောင်းမတပ်ဆင်နိုင်လျှင်, အွန်လိုင်းမျိုးစုံ browser များအတွက် site ကိုအလုပ်စစ်ဆေးပါလိမ့်မယ်တဲ့ service ကိုရှာပါ။