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

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

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


     อัพเดท 11 ก.ค. 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 : 35 Overall : 219,509
4,449 Comment(s), [ แฟนพันธุ์แท้ 5114 คน ]

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

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



Properties ของ Background ที่น่าสนใจมีดังนี้
    - background-color
    - background-image
    - background-repeat
    - background-attachment
    - background-position

เราจะมีอธิบายไปทีละอย่างนะคะ

อ้างอิง
http://www.w3schools.com/css/css_background.asp


Background Color กำหนดค่าสีของพื้นหลัง

ค่าสีก็สามารถระบุได้สามแบบค่ะ...
    * name - เป็นชื่อตรงๆ อย่างเช่น "red" (ใช้คำว่า "แดง" ภาษาไทยไม่ได้นะ)
    * RGB - เป็นค่าสีแสงตามหลักฟิสิกส์ทั้งสาม เช่น "rgb(255,0,0)"
    * Hex - เป็นเลขฐานสิบหก เช่น "#ff0000"

ตัวอย่างเวลานำมาใช้จริงในโค้ด...

<style type="text/css">
h1 {background-color:red;}
p {background-color:rgb(255,0,0);}
div {background-color:#ff0000;}
</style>


จะออกมาเป็นสีแดงเหมือนกันทั้งหมดค่ะ

ถ้าหากว่าอยากให้พื้นหลังเป็นสีใส มองทะลุผ่านได้ ก็ตั้งค่าเป็น transparent นะคะ

<style type="text/css">
td {background-color:transparent;}
</style>


Background Image ใส่ภาพให้พื้นหลัง

<style type="text/css">
body {background-image:url('http://image.dek-d.com/21/815724/100232466');}
</style>

โค้ดตัวอย่าง bg ของหน้านี้

ในวงเล็บของ url จะใช้ ' ' หรือ " " คร่อมก็ได้ค่ะ (ใช้อัญประกาศเดี่ยว หรืออัญประกาศคู่ก็ได้) แต่ถ้าเลือกใช้อันไหนเป็นตัวเปิดแล้วก็ต้องใช้ตัวปิดให้เหมือนกัน

ถ้าหากว่าทำการกำหนดทั้ง properties background-color และ background-image สีก็อยู่หลังภาพค่ะ
บางครั้งก่อนโหลดภาพเสร็จ เราจึงเห็นสี background-color ที่กำหนดไว้
ถ้าใช้ png ภาพกึ่งโปร่งใส ก็จะเห็นสีด้วยแน่นอน

หากต้องการเอาภาพพื้นหลังออกไปก็ใส่โค้ดแบบนี้ค่ะ

<style type="text/css">
body {background-image:none;}
</style>



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

หากว่าภาพพื้นหลังของเราเล็กกว่าพื้นที่แสดงผล การตั้งค่า background-repeat ก็ช่วยเพิ่มลูกเล่นให้หลายอย่างค่ะ

แต่ว่าหัวข้อนี้ และหัวข้อที่เหลือของ background ขอไปต่อตอนต่อไปนะคะ ^^
ต้องเตรียมตัวอย่างเยอะทีเดียว...




Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 91 : [lesson] CSS > Styling Background ... ใส่สไตล์ให้พื้นหลัง (1) , ผู้เข้าชมตอนนี้ : 5922 , โพส : 13 , Rating : 100% / 3 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 13 : ความคิดเห็นที่ 4419
ยืมค่ะ^^
PS.  ไม่มีอะไรได้มาง่ายๆถ้าไม่ยอมลงมือทำ:)
Name : ลินดา ลิน < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ลินดา ลิน [ IP : 118.172.139.197 ]
ส่งข้อความลับ
วันที่: 24 สิงหาคม 2559 / 00:15
# 12 : ความคิดเห็นที่ 4295
ทำสีใสไม่ได้อ่าาาา
Name : สาหร่ายส่ายตูด < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ สาหร่ายส่ายตูด [ IP : 171.96.171.102 ]
ส่งข้อความลับ
วันที่: 27 ตุลาคม 2557 / 22:39
# 11 : ความคิดเห็นที่ 4051
ขอบคุณมากค่ะหาวิธีตั้งนานที่แท้ลืมใส่ ('...')
Name : hooknuss < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ hooknuss [ IP : 101.108.129.33 ]
ส่งข้อความลับ
วันที่: 31 กรกฎาคม 2556 / 03:04
# 10 : ความคิดเห็นที่ 4012
ขอบคุณมากนะค่ะ ><
Name : Bracelet < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Bracelet [ IP : 124.120.179.192 ]
ส่งข้อความลับ
วันที่: 20 มิถุนายน 2556 / 16:31
# 9 : ความคิดเห็นที่ 3538
ขอบคุณครับ
Name : ดาร์คไนท์ ซิลเวีย < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ดาร์คไนท์ ซิลเวีย [ IP : 180.183.221.116 ]
ส่งข้อความลับ
วันที่: 14 สิงหาคม 2555 / 20:10
# 8 : ความคิดเห็นที่ 3307
 ขอบพระคุณมากค้า ><
PS.  I'll not bow my head down.
Name : 白い妖怪 < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ 白い妖怪 [ IP : 125.26.66.213 ]
ส่งข้อความลับ
วันที่: 29 เมษายน 2555 / 20:05
# 7 : ความคิดเห็นที่ 3293
 ขอบคุณครับ
PS.  ไม่สิ่งใดดีไปกว่า "การได้เป็นคน" // โดนถีบ!
Name : I'm Sü[pr]eme {Sky} < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ I'm Sü[pr]eme {Sky} [ IP : 124.122.92.170 ]
ส่งข้อความลับ
วันที่: 27 เมษายน 2555 / 11:56
# 6 : ความคิดเห็นที่ 1446
ขอบคุณมากฮับ>w<
PS.  ผมอยากบอกคนๆนั้นจัง....อย่ามองผมแบบนั้นสิ....รู้ตัวนะว่าหล่อ...แต่ว่า....มองกันอย่างนั้น.......มันขนลุกนะครับป้า....
Name : Dark Foréšt < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Dark Foréšt [ IP : 223.206.164.47 ]
ส่งข้อความลับ
วันที่: 16 มกราคม 2554 / 19:10
# 5 : ความคิดเห็นที่ 970
ขอบคุณค่ะ เอาไปปรับใช้เรียบร้อยแล้วค่ะ
PS.  แม้มันจะไม่ถูกใจฉัน แต่อย่างน้อยฉันก็ได้เห็นเธอ
Name : ~Dark Angel~ < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ~Dark Angel~ [ IP : 183.89.127.202 ]
ส่งข้อความลับ
วันที่: 19 กันยายน 2553 / 11:04
# 4 : ความคิดเห็นที่ 812
โอ้วว. ละเอียดมากเลยค่ะ

ขอบคุณค่ะ
PS.  STATUS ;; SHINee LUCIFER 2010 07 19
Name : ★GKч ₤ucifer. < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ ★GKч ₤ucifer. [ IP : 124.121.105.169 ]
ส่งข้อความลับ
วันที่: 19 กรกฎาคม 2553 / 22:23
# 3 : ความคิดเห็นที่ 807
ละเอียดดีจังเลย ชอบค่ะ^^
Name : NunaN ● Dr.Sweet < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ NunaN ● Dr.Sweet [ IP : 125.26.131.124 ]
ส่งข้อความลับ
วันที่: 18 กรกฎาคม 2553 / 17:20
# 2 : ความคิดเห็นที่ 800
โหละเอียดมากเลย
ขอบคุณค่ะ
;)
PS.  성민 오빠 아무도 너만큼 나를 대단히울려.
Name : S&P❤ミ* < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ S&P❤ミ* [ IP : 125.25.46.172 ]
ส่งข้อความลับ
วันที่: 14 กรกฎาคม 2553 / 15:54
# 1 : ความคิดเห็นที่ 799
ส่วนตัวชอบใช้ background ไปเลยมากกว่า มันรวมอะไรหลายๆ อย่างได้ =o=
Name : Fantasier < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Fantasier [ IP : 58.147.83.209 ]
ส่งข้อความลับ
วันที่: 13 กรกฎาคม 2553 / 16:36
หน้าที่ 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