မဂၤလာပါ
က်ေနာ္ကုိလာလာေျပာေနက်တာေတာ့အမ်ားၾကီးပဲ က်ေနာ္လဲ မအားတာက တစ္ေၾကာင္း ပ်င္းေနတာက တစ္ေၾကာင္း နဲ ့ဘာပုိစ့္မွကုိမတင္ျဖစ္ဘူးဗ်ာ
ဒီေန ့စိတ္ကူး ရတာနဲ ့တင္ေပးလိုက္ပါတယ္ CSS နဲ ့background ေရးနည္းေလးပါ HTML နဲ ့ ပါတြဲျပီးေဖၚျပလိုက္ပါမယ္ ၾကိဳးစားလုပ္ၾကည့္က်ပါ ။
CSS background မွာကုဒ္မွာပါ၀င္ရမဲ ့အခ်က္ေလးေတြကုိ အရင္ သိေအာင္ေျပာျပပါမယ္
ပါ၀င္ရမဲ ့အခ်က္ငါးခ်က္ရွိပါတယ္
၁ ။ background-color
၂ ။ background-image
၃ ။ background-repeat
၄ ။ background-attachment
၅ ။ background-position
ဆုိျပီးပါ၀င္ပါတယ္ ဒီအခ်က္ငါးခ်က္ကုိ ထည့္သြင္းေရးေပးရပါလိမ့္မယ္
၁ ။ ေနာက္ခံကာလာ အေရာင္ကုိေဖၚျပပါတယ္
၂ ။ ေနာက္ခံ ပုံ ကုိေဖၚျပပါတယ္
၃ ။ ေနာက္ခံ ပုံကုိ ပုံပြားမလားတစ္ပုံထဲေပၚခ်င္လားဆုိတာကုိေဖၚျပပါတယ္
၄ ။ ေနာက္ခံ ပုံကုိပူးတြဲတင္ျပပါတယ္
၅ ။ ေနာက္ခံ ပုံရဲ ့ဘယ္မွာေဖၚျပမလဲ ဆုိတဲ ့ ေနရာသတ္မွတ္ခ်က္ကုိေဖၚျပပါတယ္ ။
<style type="text/css"> ဆုိျပီး စေရးပါမယ္ ဘာလို ့လဲ ဆုိေတာ့ CSS ကုဒ္ကုိ ေဖၚျပေပးဖုိ ့အတြက္ပါ အဆုတ္မွာေတာ့ </style> နဲ ့ျပန္ဆုံးပါမယ္
<style type="text/css">
body { background-image: url(http://dl8.glitter-graphics.net/pub/201/201078ahywuks72i.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; }
</style> ကဲဗ်ာ က်ေနာ္ တုိ ့အေပၚမွာေဖၚျပပါကုဒ္ေတြထည့္ျပီးလိုက္ပါျပီ ေသျခာေလးၾကည့္လိုက္ပါ ။
no-repeat ဆုိတာကေတာ့ က်ေနာ္တုိ ့ပုံကုိ တစ္ပုံထဲသာေဖၚျပခုိင္းထားျခင္းျဖစ္ပါတယ္ ။
transparent ဆုိတာက ေတာ့ က်ေနာ္ တုိ ့ေနာက္ခံကာလာကုိ အၾကည္ေလးဘာကာလာမွမထည့္ထားဘူးဆုိတာကုိေဖၚျပထားျခင္းျဖစ္ပါတယ္ ။
fixed ဆုိတာကေတာ့ က်ေနာ္ တုိ ့ပုံကုိ အတည္တက် ေဖၚျပခုိင္းထားတဲ ့ေနရာမွာပဲ ေဖၚျပပါလို ့ ထည့္သြင္းထားျခင္းျဖစ္ပါတယ္ ။
center ဆုိတာကေတာ့ က်ေနာ္တုိ ့ပုံကုိ အလည္တည့္တည့္မွာသာ ေဖၚျပခုိင္းထားျခင္းျဖစ္ပါတယ္ ။
ပထဦးက်ေနာ္တုိ ့ Html နဲ ့ေရးမယ္ဆုိရင္ အရင္ဆုံး
<html>
<head>
<title>IT friendships</title>
</head></html>ဒီကုဒ္သည္ ဘာကုိေဖၚျပလဲ ဆုိရင္ က်ေနာ္ တုိ ့ tab bar ေပၚက tittle bar မွာ ေပၚေနမဲ ့နာမည္ေလးေပါ့ ေနာ္
ပာုတ္ျပီ ဆက္ေရးလိုက္က်ရေအာင္ေနာ္ html နဲ ့
<html>
<head>
<title>IT friendships</title>
</head>
<style type="text/css">
body { background-image: url(http://dl8.glitter-graphics.net/pub/201/201078ahywuks72i.jpg);
background-color: transparent;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; }
</style>
</html>မယုံဘူးဆုိ notepad နဲ ့ save ၾကည့္လိုက္ပါ save တဲ ့ေနရာမွာ .html ဆုိျပီး save ျပီးသိမ္း လိုက္ပါ ျပီးရင္ ကုိယ့္ကြန္ျပဴတာထဲမွာ ေမာ္ဇီလာျဖစ္ျဖစ္ ဘာျဖစ္ျဖစ္နဲ ့ဖြင့္
ၾကည့္လိုက္ပါ ေနာက္ခံ background ေလးေပၚေနတာေတြ ့ရပါမယ္ ။
အဆင္ေျပျပီးလုပ္တက္က်ပါေစ ဗ်ာ
ZO Sangpy ( Pu ZO Net အုိင္တီနည္းပညာ )
No comments:
Post a Comment
ကျွန်တော်သည် ပညာရှင်တစ်ယောက် မဟုတ်ပါ ၊ ပညာသင်ယူနေသော လူတစ်ယောက် ဖြစ်သည်/
ပြောချင်တဲ့ စကားလေးတွေ ပြောနိုင်တယ်နော်