{ Winter Code Room }

ตอนที่ 52 : [Tip] การทำสีพื้นหลังใด ๆ ให้โปร่งใส โดยไม่ต้องง้อรูปภาพ

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 1,701
    จำนวนคนให้กำลังใจ : 0 ครั้ง
    15 เม.ย. 57


การทำพื้นหลังใด ๆ ให้โปร่งใส โดยไม่ต้องง้อรูปภาพ
...ใช้แต่โค้ดล้วน ๆ ค่ะ

.....................................................

 

            สวัสดีค่ะ วันนี้ไรเตอร์จะมาแนะวิธีการทำพื้นหลังหรือส่วนใดก็ได้ในหน้าบทความที่สามารถเปลี่ยนสีได้ ให้เป็นสีแบบโปร่งใสโดยที่ไม่ต้องมาพึ่งการทำภาพโปร่งใสค่ะ แค่ใส่โค้ดสีลงไปเท่านั้นเอง

           

            แต่ก่อนที่จะอธิบายอะไร ไรเตอร์อยากให้ทุกคนเก็บลิงค์นี้ไว้ดี ๆ นะคะ เป็นลิงค์เวบสำหรับหาโค้ดสีได้เองตามใจชอบ ไม่ต้องมานั่งหาโค้ดสีตามตารางให้ตาลายค่ะ คลิกเลย >> Click

 

            ก่อนอื่นเลยเราจะต้องรู้ก่อนว่าโค้ดสี ที่นำมาใช้ในการแต่งหน้าเวบต่าง ๆ นั้น มีหลายประเภท คือ

            1. Hex Code โค้ดสีแบบนี้ คือโค้ดสีทั่วไปที่เรามักเจอในการแต่งบทความค่ะ โค้ดจะมีเครื่องหมาย #ตามด้วยตัวเลข 6 ตัวติดกัน

            ตัวอย่าง >> #000000 = สีดำ, #ffffff = สีขาว

             2. Short Hex Code โค้ดสีแบบนี้ จะเป็นแบบย่อของ Hex Code อีกทีหนึ่งค่ะ โดยย่อจาก 6 ตัว ให้เหลือแค่ 3 ตัว
            ตัวอย่าง
>> #000 = สีดำ, #fff = สีขาว

             3. RGB % เป็นโค้ดสีแบบแบ่งเป็นเปอร์เซนต์ค่ะ ก็คือ R (แดง)%, G (เขียว)%, B (น้ำเงิน)% ขอไม่พูดถึงอย่างละเอียดนะคะ ข้ามไปได้เลย ไม่ค่อยเป็นที่นิยมในการนำมาแต่งบทความในเด็กดี

            4. RGB Absolute เป็นโค้ดสีคล้าย ๆ ข้อสามค่ะ แต่จะไม่ใส่ตัวเลขเป็นเปอร์เซนต์ จะใส่เป็นค่าสี (ค่ามากสุดของแต่ละสีคือ 255)
            ตัวอย่าง >> rgba(0, 0, 0) = สีดำ , rgba(255, 255, 255) = สีขาว

            5. Keyword เป็นแบบใส่คีย์เวิร์ดชื่อสีลงไป

            ตัวอย่าง >> black = สีดำ, white = สีขาว

 

...................................................

 

            โค้ดสีตัวสำคัญที่สามารถนำมาทำให้เป็นแบบโปร่งใสได้ ก็คือแบบข้อ 4. RGB Absolute ค่ะ วิธีการง่าย ๆ คือ ใส่โค้ดสี แบบ RBG ลงไป แล้วเพิ่มค่า opacity ลงไปด้วย

            ค่า opacity ถ้าจะให้อธิบายง่าย ๆ ก็คือค่าการมองเห็นค่ะ ยิ่งมีค่า opacity มากเท่าไหร่ จะยิ่งเห็นสี ๆ นั้นชัดเจนมากยิ่งขึ้น ...กลับกัน ถ้ายิ่งมีค่า opacity น้อย ก็จะยิ่งเห็นสี ๆ นั้นโปร่งใสมากยิ่งขึ้น ...

 

            ยกตัวอย่างเช่น

            สีดำ ค่า RGB จะอยู่ที่ (0, 0, 0) ถ้าเราต้องการให้สีดำนั้นโปร่งใส ก็ให้เติ่มค่า opacity ลงไป (ค่าเต็มของ opacity ในโค้ดสี RGB คือ 1 ค่ะ) ถ้าอยากให้โปร่งใส 50% ก็ต้องใส่ ,0.5 ลงไปก่อนจะปิดวงเล็บ

            ตัวอย่างโค้ด

            v

            rgba(0, 0, 0, 0.5)                     = สีดำโปร่งใส ค่า opacity อยู่ที่ 50%

            rgba(0, 0, 0, 0.75)                   = สีดำโปร่งใส ค่า opacity อยู่ที่ 75%

            rgba(255, 255, 255, 0.5)         = สีขาวโปร่งใส ค่า opacity อยู่ที่ 50%


.....................................................

วิธีการหาโค้ดสี
rgba (RGB Absolute)

            วิธีการหาโค้ดสี แบบ RGB Absolute ก็ง่าย ๆ ค่ะ ให้คลิกเข้าไปที่เวบหาโค้ดสีที่ไรเตอร์ได้แปะลิงค์ไว้ให้แล้วข้างต้น และเลือกสีที่ต้องการ เมื่อได้แล้ว ให้สังเกตตรงส่วนนี้ค่ะ

  v

           
            เห็นตัว
R, G, B ที่อยู่ด้านข้างมั๊ยเอ่ย ให้ก็อบตัวเลขของแต่ละอันมาได้เลยค่ะ

            อย่างในรูป จะเป็น R 132, G 91, B 214

            ...เวลานำมาใส่เป็นโค้ดสี rgba ก็จะเป็นแบบนี้ค่ะ

            >> rgba(132, 91, 214)

 

...................................................

 

            เมื่อเข้าใจแล้ว เราลองมาใส่โค้ดเปลี่ยนสีพื้นหลังรองแบบโปร่งใสกันดูดีกว่าค่ะ

            **โค้ดที่นำมายกตัวอย่าง เป็นโค้ดเปลี่ยนสีพื้นหลังรองของบทความเวอร์ชั่นใหม่นะคะ

 

            <style type="text/css">

            /*เปลี่ยนสีพื้นหลังรอง-SakuraiWinter*/

            #big_head , .content, .box03, .box04_page {

            background: #โค้ดสี repeat; /*สีพื้นหลัง*/

            }

             #main {

            width: 987px; /*ปรับความกว้างปีกได้ค่ะ*/

            background: #โค้ดสี repeat; /*สีพื้นหลังปีก=*/

            }

            </style>

 

.....................................................

 

            สังเกตคำว่า #โค้ดสี ในโค้ดต้นฉบับดูนะคะ ให้เรานำโค้ดสีที่เป็น rgb และปรับค่า opacity ให้ได้ตามที่ต้องการแล้วไปแทนค่าตรงส่วนนี้ได้เลยค่ะ ก็จะได้แบบนี้

            v

            <style type="text/css">

            /*เปลี่ยนสีพื้นหลังรอง-SakuraiWinter*/

            #big_head , .content, .box03, .box04_page {

            background: rgba(255, 255, 255, 0.5) repeat; /*สีพื้นหลัง*/

            }

             #main {

            width: 987px; /*ปรับความกว้างปีกได้ค่ะ*/

            background: rgba(255, 255, 255, 0.5) repeat; /*สีพื้นหลังปีก=*/

            }

            </style>

 

..................................................... 

จบ How to เพียงเท่านี้ค่ะ หวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้อ่านบ้างไม่มากก็น้อย

หากมีอะไรสงสัยเพิ่ม สามารถติดต่อเข้ามาได้ที่ qmsg ในไอดีของไรเตอร์ได้เลยนะคะ

แต่หากอยากติดต่อแบบเรียลไทม์ ก็ตามช่องทางด้านล่างเลยค่ะ (บางทีไรเตอร์ก็ขี้เกียจกด F5 ในไอดี)

v
FB Page         Twitter

       

(((^_^)))

 

Sakurai Winter

.....................................................

391 ความคิดเห็น

  1. #374 P4 [ akthw ] (@group-z-worst) (จากตอนที่ 52)
    วันที่ 6 กันยายน 2560 / 12:20
    ขอบคุณค่ะ 
    #374
    0
  2. #285 genkii (@genkii) (จากตอนที่ 52)
    วันที่ 18 ตุลาคม 2558 / 04:36
    ขอบคุณน้า อธิบายเข้าใจมากเลย
    #285
    0
  3. #273 Thechoco's (@fluffychoco) (จากตอนที่ 52)
    วันที่ 31 กรกฎาคม 2558 / 17:58
    ขอบคุณน้า
    #273
    0
  4. วันที่ 17 พฤษภาคม 2558 / 20:10
    กรี๊ดกร๊าดขอบคุณมากมายคะ >O<
    #253
    0
  5. #249 M.A.Y (@2413diia) (จากตอนที่ 52)
    วันที่ 10 พฤษภาคม 2558 / 13:16
    ขอบคุณมากๆๆๆๆๆเลยค่ะ
    #249
    0
  6. วันที่ 7 ตุลาคม 2557 / 20:16
    ขอบคุนมากๆๆนะคะ ถ้าหนูไม่เจอพี่หนูคงถอดใจไปเลยคะ ขอบคุนมากๆๆๆๆๆๆๆๆเลยคะ
    #202
    0
  7. #200 Death_Heart (@d-mon) (จากตอนที่ 52)
    วันที่ 28 กันยายน 2557 / 07:46
    แล้วทำยังไงให้ตรงพื้นหลังส่วนเนื้อหาโปร่งใสหรอ
    #200
    0
  8. #175 nuttiwkub (@venuszazakub) (จากตอนที่ 52)
    วันที่ 4 มิถุนายน 2557 / 12:05
    ขอบคุณมากครับ
    #175
    0
  9. #165 Overdose_EXO (@exoexohh) (จากตอนที่ 52)
    วันที่ 13 พฤษภาคม 2557 / 21:48
    ขอบคุณมากค่ะ เก่งจังเลยค่ะ ขอให้ทำบทความแจกอย่างนี้ต่อไปเรื่อยๆ นะคะ  
    #165
    0
  10. #137 Butterfly in love (@honey-blacklist) (จากตอนที่ 52)
    วันที่ 23 เมษายน 2557 / 00:03
    ขอบคุณมากน้า ^-^
    #137
    0
  11. วันที่ 7 เมษายน 2557 / 00:01
    ขอบคุณนะเจ้ *O*
    เก๋กู๊ด คือแบบกันเว็บฝากรูปงอแงได้เลย 55555 
    #59
    0
  12. #58 M (@melody-mushroom) (จากตอนที่ 52)
    วันที่ 6 เมษายน 2557 / 19:48
    ขอบคุณมากค่า
    เราเพิ่งรู้ว่าทำแบบนี้ได้ด้วย อย่างนี้สะดวกมากๆ เลย ไม่ต้องมายุ่งยากเรื่องรูป มีโค้ดสีก็สิ้นเรื่อง
    ขอบคุณอีกครั้ง และขอบคุณอีกทีนะคะ ♥
    #58
    0