พื้นฐาน CSS Properties – Font and Text – รูปแบบฟอนต์และข้อความ

06/05/2014

แปลความหมายเพลง Olivia Ong – Kiss Me

07/05/2014

พื้นฐาน CSS Properties – Color Background and Image – ภาพพื้นหลัง

07/05/2014
empty image
empty image

วันนี้จะเป็นคุณสมบัติของ CSS ในเรื่องเกี่ยวกับการใส่สีพื้นหลัง ภาพพื้นหลัง เอาแบบพื้นๆ ไปก่อน จะเป็นยังไงไปดูกันเลย…

background-color

       กำหนดสีของพื้นหลัง ตัวอย่าง background-color:#FFF; ซึ่งค่า Value จะเป็นรหัสสีซึ่งก็สามารถเขียนได้หลายแบบ ดูเพิ่มเติ่ม……CSS กับ Value

background-image ภาพพื้นหลัง

ใส่ภาพพื้นหลัง โดย Value จะเป็น URL ของภาพ ตัวอย่าง url(images/olivia5.jpg) หรือภาพจากอินเทอร์เน็ตก็ได้เช่น url(http://www.image.com/olivia.jpg) ประมาณนี้ แต่ต้องระบุโพรโทคอลโดยใส่คำว่า http ด้วย

background-repeat

เป็นการแสดงภาพซ้ำ value ได้แก่
repeat เป็นค่าปกติ โดยจะซ้ำทั้ง x และ y โดยตำแหน่งของภาพเริ่มจากด้านซ้าย

background-repeat: repeat;

no-repeat ก็คือไม่ซ้ำภาพ จะแสดงภาพเดียว

background-repeat: no-repeat;

repeat-x ซ้ำภาพในแนวนอน หรือแกน X

background-repeat: repeat-x;

repeat-y ซ้ำภาพในแนวตั้ง หรือแกน Y

background-repeat: repeat-y;

round คือภาพจะถูกยืด ปรับให้มีขนาดพอดี เต็มจอของ browser

background-repeat: round;

background-attachment

ให้ภาพเลือกตาม scrollbar หรืออยู่นิ่ง โดยมี scroll คือภาพจะเลื่อนตาม scrollbar และ fix คือภาพจะติดอยู่ที่หน้าจอตลอด
(คือมองอีกมุมนึงคือ scroll ภาพมันอยู่นึ่ง แล้วจอเราเลื่อนผ่าน กับ fix ภาพมันเลื่อนตามจอตลอด -..-)
การเขียน background-attachment: scroll;

background-position

ตำแหน่งของภาพ สามารถใส่เป็น ตำแหน่งพิกเซล, เปอร์เซนต์ หรือ left, right, center, top, bottom
การกำหนด position จะมีผลต่อการ repeat ด้วย

background-position:center;

 

background-position:center repeat;

ค่า center สามารถกำหนดพร้อมกันกับ left, right ได้ เช่น
background-position:center right; โดยภาพก็จะไปอยู่ตรงกลาง ทางด้านขวา และมีแบบอื่นๆ โดยการกำหนดค่าตำแหน่งลงไปเลย เช่น
background-position: 40% 50%; (% ของขนาดหน้าจอ)
background-position: 100 100; (หน่วยเป็น พิกเซล)
background-position: 100 50%; กำหนดผสมกันก็ได้

background-position: 100 50%;

background-size

      กำหนดขนาดของภาพ โดยกำหนดเป็นค่าเป็น
auto – ค่าปกติ ขนาดปกติ เท่าภาพเดิม
px หรือ % – ขนาดตามต้องการ ค่าแรกความกว้าง ถัดมาเป็นความสูง
background-size: 500 500;
background-size: 50% 100%;
cover – ขยายทั้งด้านกว้างและยาวในอัตราเท่ากัน ให้เต็มจอ broswer พอดี ซึ่งภาพด้านยาวมันก็จะเกินจอไป
background-size: cover;
contain – ปรับภาพ ทั้งด้านกว้างยาวในอัตราเท่ากัน ให้ด้านกว้างและยาวชนขอบจอ browser พอดี
background-size: contain;

background-origin

       กำหนดตำแหน่งของภาพระหว่างขอบ, กรอบ
border-box – อยู่ในเส้นขอบ โดนขอบทับ
background-origin: border-box;
padding-box – อยู่ในขอบ ไม่โดนขอบทับ
background-origin: padding-box;
content-box – อยู่ในเนื้อหา หรือข้อความ
background-origin: content-box;

background-clip

       กำหนดพื้นที่ของการแสดงภาพกับขอบ, กรอบ เท่าที่ลอง จะเห็นผลกับภาพและสีพื้นหลัง โดยภาพต้องมีการกำหนด repeat ด้วย

border-box – ภาพเต็มขอบ

background-clip: border-box;
padding-box – ภาพอยู่ในขอบ
background-clip: padding-box;
content-box  – ภาพอยู่ในเนื้อหา และเต็มขอบของเนื้อหา
background-clip: content-box;

background

เป็นการเขียนแบบสั้น หรือ shorthand โดยเขียนเรียงได้เลย คือ
background: color position size repeat origin clip attachment image; ไม่ต้องเรียงลำดับก็ได้ ตัวอย่าง
background: #000 center right /50% 50% no-repeat fixed url(images/olivia5.jpg) ;
background: 100 100/50% 50% fixed no-repeat url(images/olivia5.jpg) #000;

**เพื่อไม่ให้ค่าตำแหน่งและขนาดซ้ำกัน การกำหนดขนาดจะใส่ ( / ) แล้วตามด้วยขนาด

แต่ถ้าจะไม่กำหนดค่าบางอย่าง ก็ข้ามไปเลยเช่น
background: url(images/olivia5.jpg) fixed center; ค่าที่ไม่กำหนด ก็จะถูกกำหนดเป็นค่าปกติไป

สำหรับวันนี้… น่าจะครบแล้วนะ…Zzz

Ref.
image – Olivia Ong
http://www.w3schools.com/cssref/css3_pr_background.asp