วันเสาร์ที่ 20 เมษายน พ.ศ. 2556

Background

เราสามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น 

PropertyDescriptionValues 
background-attachmentใช้กำหนดว่าต้องการให้ภาพพื้นหลังนั้นอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Barfixed
scroll		fix อยู่กับที่
เลื่อนตาม Scroll Bar
background-colorใช้กำหนดทั้งสี พื้นหลังของเว็บเพจ หรือ ตารางcolor-rgb
color-hex
color-name
transparent		รหัสสี

ชื่อสี
background-imageใช้กำหนดรูปภาพ ให้พื้นหลังของเว็บเพจ หรือตารางurl ของรูปเช่น url(images/bg.jpg)
background-positionใช้กำหนดตำแหน่งการจัดวางรูปภาพพื้นหลังtop left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeatกำหนดรูปภาพพื้นหลังว่าต้องการให้มีการเรียงต่อรูปภาพหรือไม่repeat
repeat-x
repeat-y
no-repeat		ไม่ให้มีการวางต่อรูปภาพ
วางต่อรูปภาพแนวนอน
วางต่อรูปภาพแนวตั้ง
วางต่อรูปภาพทั้งแนวนอนและตั้ง
backgroundเราสามารถกำหนด property ให้กับ background ได้ในคำสั่งประกาศเดียวbackground-color
background-image
background-repeat
background-attachment
background-position		 


ExampleBackground เป็นรูปอยู่ด้านบน ขวา ไม่ repeat
<div style="background-attachment:scroll; background-image:url(../images/bg1.gif);background-position:top right; background-repeat:no-repeat">
<br /><br /><br /><br />
</div>
Output




ExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeat">
<br /><br /><br /><br />
</div>
Output



ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวนอน
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-x">
<br /><br />Enjoyday.net<br /><br />
</div> 
Output


Enjoyday.net
ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-y">
<br /><br />Enjoyday.net<br /><br />
</div>
Output


Enjoyday.net
ExampleBackground เป็นรูป repeart ทั้งแนวนอน และแนวตั้ง
<div style="background-image:url(../images/bg2.gif); background-repeat:repeat">
<br /><br />Enjoyday.net<br /><br />
</div>
Output


Enjoyday.net
ExampleBackground เป็นพื้นสีฟ้า
<div class="output_box" style="background-color:#D7EBFF">
<br /><br />Enjoyday.net<br /><br />
</div>
Output


Enjoyday.net
ExampleBackground เป็นรูป Fix
<textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวัสดีค่ะ
นี่เป็น Background แบบ Fix
รูปจะไม่เลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
Output
 

ExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar
<textarea style="background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px" rows="3">สวัสดีค่ะ
นี่เป็น Background แบบไม่ Fix
รูปจะเลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
Output
 
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)