คุณกำลัง login ด้วย [ เปลี่ยนชื่อ | ออกระบบ ]
 กระทู้ Top5 วันนี้ | นิยาย | ค้นหานิยาย | บอร์ดนักเขียน | บอร์ด AF | บอร์ด TheStar | ของที่ระลึก Dek-D | App อ่านนิยายบนมือถือ New! |
  นิยายรักหวานแหวว | นิยายรักเศร้าๆ | นิยายซึ้งกินใจ | นิยายแฟนตาซี | นิยายผจญภัย | เรื่องสบายๆคลายเครียด | แฟนฟิค | วรรณกรรมเยาวชน |
เข้าสู่ My.iD Control สมัครเป็นนักเขียนใหม่ | วิธีลงบทความ กฏเกณฑ์การใช้งาน | การควบคุมเรตติ้ง

Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ตอนที่ 92 : [lesson] CSS > Styling Background ... ใส่สไตล์ให้พื้นหลัง (2)


     อัพเดท 17 ก.ค. 53
กลับไปหน้าหลักของบทความ
แจ้งเนื้อหาในตอนไม่เหมาะสม
นิยาย-เรื่องยาว: ไลฟ์สไตล์/ดีไซน์ กราฟิก
Tags: โค้ด, code, แต่งไอดี, ไอดี, แต่ง id, id, My.iD, My.iD2, ตกแต่ง, นิยาย
ผู้แต่ง : Caje ดูเน็ตเวิร์คอื่นๆ ของ Caje
My.iD: https://my.dek-d.com/Caje
< Review/Vote > Rating : 95% [ 233 mem(s) ]
This month views : 68 Overall : 219,390
4,449 Comment(s), [ แฟนพันธุ์แท้ 5120 คน ]

[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 92 : [lesson] CSS > Styling Background ... ใส่สไตล์ให้พื้นหลัง (2) , ผู้เข้าชมตอนนี้ : 10012 , โพส : 2 , Rating : 20% / 3 vote(s)

ขนาดตัวอักษร : เพิ่มขนาด | ลดขนาด




Background Repeat ต่อภาพพื้นหลังแบบกระเบื้อง

property นี้ต้องใช้คู่กับ backgrond-image นะคะ

<style type="text/css">
div_repeat
{
background-image:url('http://image.dek-d.com/23/815724/104982159');
background-repeat:repeat;
}
</style>




ภาพที่ใช้




ผลลัพธ์จะออกมาเป็นประมาณนี้




<style type="text/css">
div_repeatx
{
background-image:url('http://image.dek-d.com/23/815724/104982158');
background-repeat:repeat-x;
}
</style>



ภาพที่ใช้


ผลลัพธ์จะซ้ำแค่แนวแกน x (แนวนอน) เท่านั้น



ถ้าตั้ง value เป็น repeat-y ก็จะซ้ำภาพในแนวแกน y (แนวตั้ง) แทนค่ะ


สุดท้ายก็คือ

background-repeat:none;


จะไม่ซ้ำรูป ถ้าเกิดพื้นที่แสดงผลใหญ่กว่ารูปที่ใช้ก็จะเห็นสีพื้นหลังที่ตั้งไว้แทน

ถ้าเราไม่ตั้งค่านี้ไว้ ค่ามาตรฐานจะเป็น repeat ค่ะ



Background Attachment 
ยึดพื้นหลังให้อยู่กับที่

property นี้ก็คือตัวกำหนดว่าจะให้ภาพพื้นหลังเลื่อนตามสกอล์บาร์หรือไม่นั่นเองค่ะ

มีสองค่าให้เลือกคือ...
scroll
fixed

scroll คือค่ามาตรฐาน หรือไม่ล็อกนั่นเอง
ส่วน fixed ก็จะตรงข้ามกัน

สำหรับคนชอบใช้บีจีใหญ่ๆ ก็ควรเลือกเป็นแบบ fixed ล่ะค่ะ

background-attachment:fixed;





Background Position
กำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง

ต้องใช้คู่กับ backgrond-image เช่นเดิมค่ะ

ค่าที่เลือกได้ก็อย่างเช่น...

left top (ค่ามาตรฐาน)
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

ตัวอย่างการใช้งานคือ บางภาพที่มีจุดเด่นอยู่ตรงมุมเช่นภาพนี้...
ถ้าตั้งค่าเป็น...

background-position:right bottom;

แล้วกำหนดสีพื้นหลังเป็นสีขาว จะเหมาะทีเดียวค่ะ

ภาพที่มีจุดเด่นอยู่ตรงกลางก็อาจจะกำหนดค่าเป็น center top ได้ค่ะ



Background - Shorthand property


จาก properties ทั้งหมดที่รู้มา เราสามารถย่อโค้ดรวมกันได้ภายใต้ property ที่ชื่อ background เพียงหนึ่งเดียว

ตัวอย่าง...
body {background:#ffffff url('img_tree.png') no-repeat right top;}

โดยเรียงลำดับตามนี้ค่ะ
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
ถ้าอันนี้ไม่มี หรืออยากให้ค่ามาตรฐานอยู่แล้ว ก็ข้ามไปได้เลยค่ะ ไม่ต้องใส่ให้ครบก็ได้ ^^
properties ทั้งหลายของ background ก็ผ่านไปแล้ว ถ้าลองเอาไปประยุกต์ใช้ผสมผสานกันดูก็สามารถสร้างสรรค์งานที่น่าสนใจได้เยอะแยะแล้วล่ะค่ะ


สุดท้ายขอลงตารางสรุปสักหน่อยนะคะ

Property Description Values CSS
background Sets all the background properties in one declaration background-color
background-image
background-repeat background-attachment background-position
inherit
1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
inherit
1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
inherit
1
background-image Sets the background image for an element url(URL)
none
inherit
1
background-position Sets the starting position of a background image left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit
1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
inherit
1


Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 92 : [lesson] CSS > Styling Background ... ใส่สไตล์ให้พื้นหลัง (2) , ผู้เข้าชมตอนนี้ : 10012 , โพส : 2 , Rating : 20% / 3 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 2 : ความคิดเห็นที่ 884
ขอบคุณมากค่ะ >  <
PS.  { Eve dear Echvalencho }
Name : Judge ,, KiralaOuN < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Judge ,, KiralaOuN [ IP : 58.9.225.68 ]
ส่งข้อความลับ
วันที่: 26 สิงหาคม 2553 / 19:26
# 1 : ความคิดเห็นที่ 819
^^
ขอบคุณมากๆ ค่ะ
PS.  ●FICKLE●
Name : FICKLE' < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ FICKLE' [ IP : 202.137.149.190 ]
ส่งข้อความลับ
วันที่: 28 กรกฎาคม 2553 / 11:35

หน้าที่ 1
Post your comment : แสดงความคิดเห็น
ส่วนที่ 1: Message ข้อความ

ส่วนที่ 2 : Name ลงชื่อ
  โพสความเห็นด้วย member Login name Password
  โพสความเห็นไม่แสดง member : ชื่อ* email รูปตัวแทน
            พิมพ์เลขที่เห็น

เธซเธ™เธฑเธ‡เธชเธทเธญเนƒเธซเธกเนˆเธ›เธฃเธฐเธˆเธณเน€เธ”เธทเธญเธ™เธžเธคเธฉเธ เธฒเธ„เธก 2561

ข้อตกลง & เงื่อนไขการใช้งาน

  • กรณีที่ผลงานชิ้นนี้เป็นผลงานที่แต่งโดยผู้ลงผลงานเอง ลิขสิทธิ์ของผลงานนี้จะ
    เป็นของผู้ลงผลงานโดยตรง ห้ามมิให้คัดลอก ทำซ้ำ เผยแพร่ ก่อนได้รับอนุญาต
    จากผู้ลงผลงาน

  • กรณีที่ผลงานชิ้นนี้กระทำการคัดลอก ทำซ้ำ มาจากผลงานของบุคคลอื่นๆ ผู้ลง
    ผลงานจะต้องทำการอ้างอิงอย่างเหมาะสม และต้องรับผิดชอบเรื่องการจัดการ
    ลิขสิทธิ์แต่เพียงผู้เดียว

  • ข้อความและรูปภาพที่ปรากฏอยู่ในผลงานที่ท่านเห็นอยู่นี้ เกิดจากการส่งเข้าระบบ
    โดยอัตโนมัติจากบุคคลทั่วไป ซึ่งเด็กดีดอทคอมมิได้มีส่วนร่วมรู้เห็น ตรวจสอบ
    หรือพิสูจน์ข้อเท็จจริงใดๆ ทั้งสิ้น ผู้ใดพบเห็นการลงผลงานละเมิดลิขสิทธิ์ หรือ
    ไม่เหมาะสมโปรดแจ้งผู้ดูแลระบบเพื่อดำเนินการทันที
    Email: contact(at)dek-d.com ( ทุกวัน 24 ชม ) หรือ
    Tel: 0-2860-1142 ( จ-ศ 0900-1800 )

App อ่านนิยายบน iPad iPhone และ Android