[x]ปิดหน้าต่าง

บทความ (Article)

  [ ดูบทความทั้งหมด ]

ให้คะแนนบทความนี้

บทความหมายเลข 261 | คะแนน Rating: 2.8/5 ดาว (จากจำนวนโหวต 5 votes)

Tag :


คำสั่งที่ใช้ใส่ Background ให้เว็บเพจ

CSS

    การใส่พื้นหลังโดยใช้คำสั่ง CSS นั้นเราสามารถใส่พื้นหลังได้กับวัตถุใดก็ได้เช่น ใส่พื้นหลังให้กับหัวข้อ , ใส่พื้นหลังให้กับตาราง , ใส่พื้นหลังให้กับย่อหน้า และยังสามารถกำหนดขนาด และรายละเอียดการแสดงผลได้อีกด้วย โดยคำสั่งทั้งหมดเราจะพูดกันในบทนี้

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.ใส่พื้นหลังที่เป็นสี
    เราสามารถใส่พื้นหลังให้กับวัตถุในหน้าเว็บเพจของเราได้ ดังตัวอย่างเราใส่พื้นหลังให้กับ <body> , <h1> , <p> โดยการกำหนดสีก็ใช้แบบเดียวกับภาษา HTML

    2.ใส่พื้นหลังที่เป็นรูปภาพ
    ในตัวอย่างจะเป็นการใส่พื้นหลังที่เป็นรูปภาพ 

    3.คำสั่งให้แสดงพื้นหลังซ้ำในแนวตั้งเท่านั้น
    ตามปรกติการแสดงรูปพื้นหลังจะแสดงซ้ำๆกันจนเต็มหน้าเว็บเพจ ดังตัวอย่างที่ 2 อยู่แล้วแต่ในหัวข้อนี้จะให้แสดงซ้ำเฉพาะในแนวตั้งเท่านั้น 

    4.คำสั่งให้แสดงพื้นหลังซ้ำในแนวนอนเท่านั้น
    ตัวอย่างนี้จะเป็นคำสั่งที่ใช้แสดงพื้นหลังซ้ำเฉพาะแนวนอนเท่านั้น 

    5.คำสั่งให้แสดงพื้นหลังเพียงครั้งเดียว
    คำสั่งนี้จะเป็นการบังคับให้มีการแสดงรูปพื้นหลังเพียงครั้งเดียวเท่านั้น 

    6.คำสั่งกำหนดตำแหน่งของพื้นหลัง
    ในหัวข้อที่ 5 เรากำหนดให้แสดงพื้นหลังเพียงครั้งเดียว โดยตำแหน่งที่แสดงนั้นเป็นตำแหน่งซ้ายบนของเว็บเพจ ซึ่งในหัวข้อนี้จะระบุตำแหน่งให้กับพื้นหลังของเรา โดยใช้คำสั้ง background-position: ในตัวอย่างเราจะให้จัดเข้ากึ่งกลางของหน้า background-position: center ความจริงแล้วเราอาจจัดให้อยู่ตำแหน่งอื่นได้อีกเช่น 

     background-position: left เป็นตำแหน่งด้านซ้ายของหน้า 
     background-position: right top เป็นตำแหน่งด้านขวาบนของหน้า 
     background-position: center bottom เป็นตำแหน่งกึ่งกลางด้านล่างของหน้า 

    7.คำสั่งกำหนดตำแหน่งของพื้นหลังเป็นเปอร์เซ็นต์
    ในหัวข้อที่แล้วเป็นการกำหนดตำแหน่งแบบคร่าวๆ ในหัวข้อนี้เราจะบอกตำแหน่งของพื้นหลังเป็น % โดยจะให้รายละเอียดได้มากว่าในหัวข้อที่แล้ว เราจะใช้คำสั่งbackground-position: X% Y% โดยจะมีค่า 2 ค่าให้เราใส่คือ 

     ค่า X เป็นตำแหน่งในแนวนอน
     ค่า Y เป็นตำแหน่งในแนวตั้ง

    โดย ค่า X = 0% , Y = 0% จะอยู่ที่มุมซ้ายบนของเว็บเพจ 

    8.คำสั่งกำหนดตำแหน่งของพื้นหลังเป็น px (pixel)
    กำหนดพื้นหลังแบบ pixel จะใช้คำสั่ง background-position: Xpx Ypx โดยค่าที่เราจะต้องใส่มี 2 ค่าคือ 

     ค่า X เป็นระยะห่างจากขอบด้านซ้ายของพื้นหลัง
     ค่า Y เป็นระยะห่างจากขอบด้านบนของพื้นหลัง

    โดย ค่า X = 0px , Y = 0px จะอยู่ที่มุมซ้ายบนของเว็บเพจ 

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

    10.การใช้หลายๆคุณสมบัติโดยคำสั่งเดียว
    เราสามารถกำหนดหลายๆคุณสมบัติของพื้นหลังไว้ในคำสั่ง background: เพียงคำสั่งเดียว จะสังเกตุได้ว่า browser จะแสดงพื้นหลังที่เป็นภาพไว้บนพื้นหลังที่เป็นสีเสมอ 

บทความนี้ทำให้เห็นได้ว่า การใช้ CSS นั้นมีประโยชน์กับเรามากเพราะมีความยืดหยุ่นในการแสดงผลมาก ในบทความต่อไปจะเป็นเรื่องของการจัดตัวหนังสือในเว็บเพจ ซึ่งมีประโยชน์ในการจัดหน้าเว็บเพจมาก

เข้าชม : 175662    [ ขึ้นบน ]


เคล็ดลับเขียนเว็บไซต์ 15 อันดับล่าสุด

      วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ 8 / มิ.ย. / 2560
      วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ 8 / มิ.ย. / 2560
      วิธีเปลี่ยนเว็บไซต์ให้แสดงเป็น ขาว-ดำ เพื่อรวมไว้อาลัยกับการสวรรคตของ "ในหลวง" รัชกาลที่ ๙ 14 / ต.ค. / 2559
      Title tags กับการทำ Search Engine Optimization (SEO) 2 / ก.ย. / 2559
      การทำ SEO คืออะไร 2 / ก.ย. / 2559
      ลงโปรแกรมเพื่อจำลองเครื่องของเราให้เป็น Web Server ตอนที่ 2 2 / ก.ย. / 2559
      ลงโปรแกรมเพื่อจำลองเครื่องของเราให้เป็น Web Server ตอนที่ 1 2 / ก.ย. / 2559
      PHP คืออะไร 2 / ก.ย. / 2559
      table จัดรูปแบบของตารางด้วยคำสั่ง css 2 / ก.ย. / 2559
      เปลี่ยนสัญลักษณ์หน้า list CSS 2 / ก.ย. / 2559
      padding จัดระยะห่างระหว่างขอบของวัตถุ และเนื้อหา CSS 2 / ก.ย. / 2559
      Margin กำหนดระยะห่างระหว่างวัตถุ CSS 2 / ก.ย. / 2559
      คำสั่งที่เกี่ยวกับเส้นขอบ CSS 2 / ก.ย. / 2559
      คำสั่งจัดการฟอนต์ (font) 2 / ก.ย. / 2559
      คำสั่งที่ใช้กับข้อความ (text) CSS 2 / ก.ย. / 2559



  เพิ่มความคิดเห็น
ชื่อ/อีเมลล์ :  สมาชิกไม่ต้องกรอก
ใส่รหัสยืนยัน
ไอคอน : ย่อหน้า จัดซ้าย จัดกลาง จัดขวา ตัวหนา ตัวเอียง เส้นใต้ ตัวยก ตัวห้อย ตัวหนังสือเรืองแสง ตัวหนังสือมีเงา สีแดง สีเขียว สีน้ำเงิน สีส้ม สีชมพู สีเทา
อ้างอิงคำพูด เพิ่มเพลง เพิ่มวีดีโอคลิป เพิ่มรูปภาพ เพิ่มไฟล์ Flash เพิ่มลิงก์ เพิ่มอีเมล์
ข้อความ :




ข้อความที่ท่านได้อ่าน เกิดจากการเขียนโดยสาธารณชน และส่งขึ้นมาแบบอัตโนมัติ เจ้าของระบบไม่รับผิดชอบต่อข้อความใดๆทั้งสิ้น เพราะไม่สามารถระบุได้ว่าเป็นความจริงหรือ ชื่อผู้เขียนที่ได้เห็นคือชื่อจริง ผู้อ่านจึงควรใช้วิจารณญาณในการกลั่นกรอง และถ้าท่านพบเห็นข้อความใดที่ขัดต่อกฎหมายและศีลธรรม กรุณาแจ้งที่ Webmasterเพื่อให้ผู้ควบคุมระบบทราบและทำการลบข้อความนั้น ออกจากระบบต่อไป

แจกฟรีแนวข้อสอบภาค ก ท้องถิ่น ความรู้ความสามารถทั่วไป 1866 ข้อ
แชร์ด่วน! แจกฟรี ไม่มีลิขสิทธิ์ แนวข้อสอบท้องถิ่น ปี2560 จำนวน 417ข้อ+เฉลยครบทุกข้อ
แบ่งปันความรู้ สู่ความก้าวหน้า แจกแนวข้อสอบท้องถิ่น #ฟรี (พร้อมเฉลย) ใช้ได้ทุกตำแหน่ง
วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ
วิธีสร้างแผนที่ google map เพื่อติดในเว็บไซต์ของคุณ
กศน.กำแพงเพชร ร่วมพิธีวางพวงมาลาเนื่องในวันคล้ายวันสวรรคตสมเด็จพระนเรศวรมหาราช

 

ครูเชนดอทคอม เว็บไซต์แห่งการแลกเปลี่ยนของครู กศน. ครูนอกระบบ ครูในระบบ  

ติดต่อลงข่าวสาร  โฆษณา โทร.081-1077987
## MAXSITE 1.10 plus ##   | ADMIN | by ครูเชนดอทคอม | Facebook | Youtube | Google plus+ | IOS | Android | สร้าง QR code