លំហាត់ CSS-រូបភាព Image

លំហាត់ CSS-រូបភាព Image

លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
 

លំហាត់ទី១ ធ្វើយ៉ាងណា ដាក់ព្រំដែនរូបភាព? 

សរសេរកូដ
img {
border-width: 1px;
border-style: solid;
border-color: #000000;
}
img {
border: 1px solid #000000;
}

លំហាត់ទី២ ធ្វើយ៉ាងណា បង្កើត background រួបភាពលើទំព័រ?
 
សរសេរកូដ
body {
background-color: #ffffff;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
}

លំហាត់ទី៣ ធ្វើយ៉ាងណា ដាក់ទីតាំ background រួបភាពនៅកណ្តាល?
 
សរសេរកូដ
body {
background-color: #FFFFFF;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
}

លំហាត់ទី៤ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពអាចធ្វើចលនា text បាន?
សរសេរកូដ
body {
background-color: #FFFFFF;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;
background-attachment: fixed;
body {
background-color: #FFFFFF;
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 20px;
}
body {
background: #ffffff url(peppers_bg.jpg) no-repeat fixed 20px
20px;
}
លំហាត់ទី៥ ធ្វើយ៉ាងណា ដើម្បីបង្កើត  background រួបភាពផ្សេង?
សរសេរកូដ
#smallbox {
background-image: url(mini_chilli.jpg);

background-repeat: repeat-y;
float: left;
padding-left: 60px;
margin-right: 20px;
width: 220px;
border: 1px solid #F5C9C9;
}
<h1>Chinese style stuffed peppers</h1>
.header {
background-image: url(dotty.gif);
width: 400px;
height: 30px;
padding: 6px 6px 4px 8px;
color: #B22222;
background-color: transparent;
}
a:link, a:visited {
color: #B22222;
background-color: transparent;
font-weight: bold;
}
a:hover {
background-image: url(dotty.gif);
text-decoration: none;
}

លំហាត់ទី៦ ធ្វើយ៉ាងណា ដើម្បីបន្ថែម  background រួបភាពច្រើនជាងមួយ?
 
html 
{
background-image: url(mini_chilli.jpg);
background-repeat: repeat-y;
background-position: 2px 2px;
background-attachment: fixed;
}
body {
background-image: url(peppers_bg.jpg);
background-repeat: no-repeat;
background-position: 80px 20px;
}

Related product you might see: