ចែករំលែកលទ្ធផលការងារសម្រាប់ថ្ងៃនេះ

Background Properties របស់ css គឺត្រូវបានគេប្រើប្រាស់ដើម្បីកំនត់ទៅលើ Backgroudnn នៃ element ។

Properties របស់ css ដែលត្រូវបានគេប្រើប្រាស់សម្រាប់ Backgroud គឺ៖

–       background-color

–       background-image

–       background-repeat

–       background-attachment

–       background-positon

Background Color 

background-color Properties ដែលគេប្រើចំពោះ element គឺ background​ color។

background color នៃ Page គឺត្រូវបានគេកំនត់នៅក្នុង body selector។

ឧទាហរណ៍៖

body {background-color:#b0c4de;}

ជាមួយ CSS color គឺត្រូវប្រើប្រា់ស់ឲ្យជាក់លាក់ដោយ៖

–       a HEX value – like “#ff0000”

–       an RGB value – like “rgb(255,0,0)”

–       a color name – like “red”

នៅក្នុង ឧទាហរណ៍ខាងក្រោម element​ ដែលមាន h1, p​ , និង div មាន background color ផ្សេងៗពីរគ្នា។

ឧទាហរណ៍៖

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Background Image

Background-image Property ចំពោះរូបភាពប្រើដើម្បីដាក់ Background នៃ element។

Bckground image សម្រាប់ Page មានដូចខាងក្រោម៖

ឧទាហរណ៍៖

body {background-image:url(‘paper.gif’);}

ដោយ Default របស់ background-image Property របស់វាគឺ repeats រូបភាពទាំងពីរគឺ horizontally (ដេក) និង vertically (ឈរ)។

រូបភាពមួយចំនូន repeated horizontally (ដេក) ឬក៍ vertically (ឈរ) មើលទៅខុសប្លែកគ្នាដូចខាងក្រោម៖

ឧទាហរណ៍៖

body
{
background-image:url(‘gradient2.png’);
}

ប្រសិនបើរូបភាពគឺ repeated តែ horizontally (repeat-x) background គឺ៖

ឧទាហរណ៍៖

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

Background Image – កំនត់  position និង no-repeat

ការបង្ហាញរូបភាពតែម្តងគឺត្រូវប្រើដោយ background-repeat ៖

ឧទាហរណ៍៖

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

Position នៃរូបភាពគឺ background-position ៖

ឧទាហរណ៍៖

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}

Property របស់ Background – Shorthand

Property Shorthand សម្រាប់ Background គឺ “background” ៖

ឧទាហរណ៍៖

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

នៅពេលប្រើប្រាស់ Property Shorthand Property Values គឺ ៖

background-color

background-image

background-repeat

background-attachment

background-position