ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSS

CSS มีคุณสมบัติ ในการกำหนด สี color และ พื้นหลัง background ให้กับ html element ได้ โดยพื้นหลัง background อาจเป็นได้ทั้งสี color หรือ รูปภาพ images โดยหากเป็นรูปภาพ ยังสามารถกำหนด ตำแหน่งของ พื้นหลัง, การกำหนด การซ้ำ, และรวมทั้ง การตรึงพื้นหลัง หรือกำหนดให้เลื่อนตามการเลื่อน ของ scrollbar ได้อีกด้วบ

คุณสมบัติ color property
color
กำหนดเป็นค่าสี เช่น red #FF000 rgb(255,0,0) หรือ เป็นลักษณะ ค่าสีแบบ การถ่ายทอด inherit
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละ บราวเซอร์
สามารถกำหนดได้กับ html elements ทุกตัว
สามารถถ่ายทอดได้
ไม่สามารถ กำหนด เป็น เปอร์เซ็นต์ได้
นำเสนอโดย การแสดงผล
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ตัวอย่าง
ข้างล่างเป็นตัวอย่าง การกำหนดค่าสี แดง ให้กับ em tag element ในรูปแบบ ที่แตกต่างกัน

em { color: red }              /* กำหนดโดยการใช้ชื่อของสี */
em { color: rgb(255,0,0) }     /* กำหนดแบบ RGB อยู่ในช่วง 0 - 255  */

คุณสมบัติ Background Property
การกำหนดพื้นหลัง background สามารถกำหนดได้ทั้งสี color หรือ รูปภาพ images ตามรูปแบบของ box model
พื้นหลัง background นั้นหมายถึง พื้นหลังพื้นที่ของ เนื้อหา content ,พื้นที่ของระยะห่างจากขอบใน padding,และพื้นที่ของขอบ border โดยที่ ขอบ border สามารถกำหนด คุณสมบัติสี และรูปแบบด้วยคุณสมบัติ border property
ส่วนสำหรับ พื้นที่ของระยะห่างจากขอบนอก จะไม่รวมในพื้นหลัง background แต่จะมีลักษณะ โปร่งใส transparent

คุณสมบัติ Background properties จะไม่สามารถถ่ายทอดได้ แต่กรณีที่ element ที่อยู่เหนือกว่า หรือ parent element มีการกำหนด Background properties ดังนั้น เมื่อ ค่าเริ่มต้นของพื้นหลัง background เป็นแบบโปร่งใส transparent จึงทำให้มองเห็นพื้นหลังของ parent element

การกำหนดพื้นหลัง แนะนำให้กำหนดไว้ใน body แทนการกำหนดใน html
ตัวอย่าง

    <STYLE type="text/css">
       BODY { background: url("http://www.ninenik.com/marble.png") }
    </STYLE>

คุณสมบัติ 'background-color'
Value:   <color> | transparent | inherit 
สามารถกำหนดค่าเป็น ค่าสี หรือ โปร่่งใส transparent หรือ ลักษณะการถ่ายทอด
Initial:   transparent 
ค่าเริ่มต้นเป็น โปร่งใส
Applies to:   all elements 
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่สามารถกำหนดค่า เปอร์เซ็นต์ได้
Media:   visual 
นำเสนอ โดยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

คุณสมบัติ background-color ใช้สำหรับกำหนดค่าสีพื้นหลังของ element

ตัวอย่าง:

h1 { background-color: #F00 }

คุณสมบัติ 'background-image'
Value:   <uri> | none | inherit 
กำหนดค่าเป็น ตำแหน่งของรูปภาพ หรือ กำหนดไม่แสดง none หรือ กำหนดเป็นแบบการถ่ายทอด
Initial:   none 
ค่าเริ่มต้น คื่อไม่มี หรือไม่แสดง none
Applies to:   all elements 
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่สามารถ กำหนดเป็น เปอร์เซ้นต์ได้
Media:   visual 
นำเสนอโดยการแสดงผล
Computed value:   absolute URI or none 
ค่าจากการคำนวณ ไม่มีหรือขึ้นอยู่กับค่าสัมบูรณ์ URI

คุณสมบัติ background-image ใช้สำหรับกำหนดพื้นหลังที่ เป็นรูปภาพ
การกำหนดทั้ง background-image และ background-color จะทำให้กรณีที่ background-image ไม่มีรูปพื้นหลัง
ก็จะแสดงเป็นค่าสี แทนจากคุณสมบัติ background-color ได้

ตัวอย่าง:

body { background-image: url("ninenik.png") }
p { background-image: none }

คุณสมบัติ 'background-repeat'
Value:   repeat | repeat-x | repeat-y | no-repeat | inherit 
สามารถกำหนดค่าเป็น
repeat
ซ้ำในแนวตั้งและแนวนอน
repeat-x
ซ้ำเฉพาะในแนวนอนเท่านั้น
repeat-y
ซ้ำเฉพาะในแนวตั้งเท่านั้น
no-repeat
ไม่ต้องซ้ำ แสดงแค่รูปพื้นหลังแค่รูปเดียว
Initial:   repeat 
ค่าเริ่มต้น  เป็น ซ้ำในแนวตั้งและแนวนอน
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่มีคุณสมบัติการถ่ายทอด
Percentages:   N/A 
ไม่มีการกำหนดค่าเป็น เปอร์เซ็นต์
Media:   visual 
นำเสนอ ด้วยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ ก็จะสามารถกำหนดคุณสมบัติการแสดงผลรูปภาพซ้ำโดยใช้ background-repeat

ตัวอย่าง:

body { 
  background: white url("ninenik.png");
  background-repeat: repeat-y;
  background-position: center;
}

คุณสมบัติ 'background-attachment'
Value:   scroll | fixed | inherit 
สามารถกำหนดค่าเป็น เลื่อน sxroll ตามการเลื่อนของ scrollbar หรือ ตรึง fixed หรือ ตามการถ่ายทอด
Initial:   scroll 
ค่าเริ่มต้น เลื่อน sxroll ตามการเลื่อนของ scrollbar
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่มีการกำหนดค่า เปอร์เซ็นต์
Media:   visual 
นำเสนอ โดยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ เมื่อมีการกำหนดคุณสมบัติ  background-attachment เป็น fixed รูปพื้นหลัง
จะไม่เลื่อนตาม การเลื่อนของ scrollbar

ตัวอย่าง:

body { 
  background: red url("ninenik.png");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

คุณสมบัติ 'background-position'
Value:   [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 
สามารถกำหนดค่าเป็น เปอร์เช็นต์ หรือค่า อิงตำแหน่งด้านซ้าย ตรงกลาง แงละ ด้านขวา ตามด้วย เปอร์เซ็นต์ หรือค่า
อิงตำแหน่่งด้านบน ตรงกลาง หรือด้านล่าง หรือตามการถ่ายทอด
Initial:   0% 0% 
ค่าเริ่มต้น 0% 0% หรือ left top
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่มีการถ่ายทอด
Percentages:   refer to the size of the box itself 
เปอร์เซ็นต์กำหนดอิงตาม ขนาดของรูปพื้นหลังนั้นๆ
Media:   visual 
นำเสนอด้วยการแสดงผล
Computed value:   for <length> the absolute value, otherwise a percentage 
ค่าจากการคำนวณ กำหนดโดยตรง หรือ เป็นเปอร์เซ็นต์

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ หากไม่มีการกำหนด background-position ค่าที่ได้จะเป็นค่าเริ่มต้น หากมีการ
กำนหดค่าเดียว ค่าที่สองจะเป็น center หรือตรงกลางโดยอัตโนมัติ หากค่าหนึ่งค่าใดอย่างน้อยหนึ่งค่า ไม่ได้กำหนด
เป็นลักษณะ keyword เช่น left center หรือ top จะได้่ว่า ค่าแรกแสดงถึงตำแหน่งในแนวนอน และอีกค่าจะแสดงถึง
ตำแหน่งในแนวตั้ง และค่าที่กำหนดสามารถเป็นตัวเลขติดลบ ได้

top มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวตั้ง
right มีค่าท่ากับ '100%' สำหรับตำแหน่งในแนวนอน
bottom มีค่าท่ากับ '100%'  สำหรับตำแหน่งในแนวตั้ง
left มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวนอน
center มีค่าท่ากับ '50%' สำหรับตำแหน่งในแนวนอน

ตัวอย่าง:

body { background: url("ninenik.jpeg") right top }    /* 100%   0% */
body { background: url("ninenik.jpeg") top center }   /*  50%   0% */
body { background: url("ninenik.jpeg") center }       /*  50%  50% */
body { background: url("ninenik.jpeg") bottom }       /*  50% 100% */

คุณสมบัติ 'background'
Value:   [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit 
กำหนดค่าตามแต่ละคุณสมบัติ
Initial:   see individual properties 
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละคุณสมบัติ
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   allowed on 'background-position' 
ค่าเปอร์เซ็นต์ใช้กับ คุณสมบัติ background-position
Media:   visual 
นำแสดง ด้วยการแสดงผล
Computed value:   see individual properties 
ค่าจากการคำนวณ ขึ้นอยู่กับแต่ละคุณสมบัติ

คุณสมบัติ 'background' เป็นการคุณสมบัติแบบสั้น shorthand ที่รวมเอาทุกคุณสมบัติมารวมกัน

ตัวอย่าง

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }