CSS พื้นหลัง

CSS อนุญาตให้ใช้สีสองตัวเดียวเป็นพื้นหลัง และยังอนุญาตให้ใช้รูปภาพพื้นหลังเพื่อสร้างปรากฎการณ์ที่ซับซ้อน

CSS มีความสามารถในด้านนี้ที่นั่นมากกว่า HTML

สีพื้นหลัง

สามารถใช้ คุณสมบัติ background-colorกำหนดสีพื้นหลังสำหรับองค์ประกอบ คุณสมบัตินี้ยอมรับค่าสีที่ถูกต้อง

กฎนี้จะกำหนดสีพื้นหลังขององค์ประกอบเป็นสีเทา

p {background-color: gray;}

หากคุณต้องการให้สีพื้นหลังขยายออกมาน้อยกว่าจากข้อความขององค์ประกอบ แค่เพิ่มมากขึ้นเพียงไม่กี่พิกเซลของ padding ตัวอย่าง

p {background-color: gray; padding: 20px;}

ลองทดสอบด้วยตัวเอง

สามารถกำหนดสีพื้นหลังสำหรับองค์ประกอบทั้งหมด ซึ่งรวมถึง body จนถึงองค์ประกอบ inline อย่างเช่น em และ a ตัวอย่าง

background-color ไม่สามารถสืบทอดได้ ค่าเริ่มต้นคือ transparent ซึ่งมีความหมายว่า "สีสดใส" คือ หากองค์ประกอบไม่มีสีพื้นหลังที่กำหนด พื้นหลังจะเป็นสีสดใส และสามารถเห็นพื้นหลังขององค์ประกอบที่เป็นหลักได้

รูปภาพพื้นหลัง

ต้องการใส่รูปภาพลงในพื้นหลัง ต้องใช้ attribute background-imageค่าปริยายของ attribute background-image คือ none ที่หมายความว่าไม่มีภาพใดถูกจัดลำดับบนพื้นหลัง

ถ้าต้องการตั้งภาพพื้นหลัง ต้องตั้งค่า URL ให้กับattribute นี้

body {background-image: url(/i/eg_bg_04.gif);}

ส่วนใหญ่แล้วภาพพื้นหลังจะถูกใช้กับองค์ประกอบ body แต่ไม่จำเป็นต้องเป็นแบบนี้

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

p.flower {background-image: url(/i/eg_bg_03.gif);}

คุณยังสามารถตั้งภาพพื้นหลังสำหรับองค์ประกอบในรูปแบบ inline ได้ ตัวอย่างด้านล่างนี้จะตั้งภาพพื้นหลังสำหรับลิงก์

a.radio {background-image: url(/i/eg_bg_07.gif);}

ลองทดสอบด้วยตัวเอง

ทางทฤษฎี และสามารถใช้ภาพพื้นหลังสำหรับองค์ประกอบที่แทนที่เช่น textarea และ select แต่ไม่ใช่ทุกตัวแทนที่ใช้กับภาพพื้นหลังที่ทำงานดีในทุกสถานการณ์

นอกจากนี้ background-image ยังไม่สามารถสืบทอดมาจากองค์ประกอบที่มีอยู่แล้ว โดยทั่วไป ทุกattribute ของพื้นหลังทั้งนี้ไม่สามารถสืบทอดมาจากองค์ประกอบที่มีอยู่แล้ว

การทำนุนภาพพื้นหลัง

ถ้าต้องการที่จะทำให้ภาพพื้นหลังทั้งนี้ทำงานเป็นการทำนุน สามารถใช้ attribute background-repeat

ค่าที่ใช้กับ attribute คือ repeat ทำให้ภาพที่ใช้เป็นภาพพื้นหลังทั้งทางนอกและทางในที่เรียกว่า background-image ทั้งนี้ แต่ไม่ใช่ทุกตัวแทนที่ใช้กับภาพพื้นหลังที่ทำงานดีในทุกสถานการณ์

โดยมาตรฐาน ภาพพื้นหลังจะเริ่มตั้งแต่มุมบนขององค์ประกอบ โดยที่คุณจะเห็นตัวอย่างด้านล่างนี้

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

ลองทดสอบด้วยตัวเอง

การจัดลำดับพื้นหลัง

สามารถใช้ attribute background-positionเปลี่ยนตำแหน่งภาพในพื้นหลัง

ตัวอย่างด้านล่างนี้จะทำให้ภาพพื้นหลังตัวเดียวที่อยู่ในองค์ประกอบ body ถูกจัดลำดับให้ตั้งอยู่ตรงกลาง

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

มีวิธีหลายที่สามารถใช้เพื่อให้ค่ากับ属性 background-position โดยทั่วไป สามารถใช้คำนำหน้าที่เรียกว่า top, bottom, left, right และ center ทั้งนี้ คำนำหน้าเหล่านี้มักจะปรากฏขึ้นเป็นคู่ แต่ไม่จำเป็นต้องเป็นแบบนี้ ยังสามารถใช้ค่าความยาว เช่น 100px หรือ 5cm และสามารถใช้ค่าเปอร์เซ็นต์เช่นกัน ค่าที่แตกต่างกันนี้มีผลต่อการจัดลำดับภาพพื้นหลังอย่างเล็กน้อย

คำศัพท์

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

ตามกฎระเบียบ คำศัพท์ตำแหน่งสามารถปรากฏขึ้นในลำดับที่เท่าใดก็ได้ แต่ต้องใช้ไม่เกินสองคำศัพท์ - หนึ่งคำศัพท์สำหรับทิศทางระดับน้ำตกและอีกคำศัพท์สำหรับทิศทางระดับตั้ง

ถ้ามีการใช้คำศัพท์เพียงคำศัพท์เดียว คำศัพท์อื่นจะถือว่าเป็น center

ดังนั้น ถ้าคุณต้องการที่จะใส่ภาพในกลางบนของแต่ละย่อยข้อความ คุณสามารถประกาศเช่นนี้

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

ต่อไปนี้คือคำศัพท์ที่เท่ากัน

คำศัพท์เดียว คำศัพท์ที่เท่ากัน
center center center
top top center หรือ center top
bottom bottom center หรือ center bottom
right right center หรือ center right
left left center หรือ center left

ค่าเปอร์เซ็นต์

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

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

นี่จะทำให้ภาพถูกจัดตั้งอย่างเหมาะสม โดยจุดกลางของมันจะตั้งตรงกับจุดกลางขององค์ประกอบหมายความว่าค่าเปอร์เซ็นต์นี้ใช้กับทั้งองค์ประกอบและภาพหมายความว่าจุดที่อธิบายในภาพว่า 50% 50% (จุดกลาง) จะตั้งตรงกับจุดที่อธิบายในองค์ประกอบว่า 50% 50% (จุดกลาง)

ถ้าภาพตั้งอยู่ที่ 0% 0%，มุมบนซ้ายของมันจะตั้งอยู่ที่มุมบนซ้ายของพื้นที่เอาไว้ใช้เนื้อหาขององค์ประกอบ หากตำแหน่งของภาพคือ 100% 100% จะทำให้มุมล่างขวาของภาพตั้งอยู่ที่มุมล่างขวาของเนื้อหาขององค์ประกอบ

ดังนั้น ถ้าคุณต้องการที่จะใส่ภาพภายในตำแหน่ง 2/3 ทางด้านน้ำตกและ 1/3 ทางด้านตั้ง คุณสามารถประกาศเช่นนี้

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

ถ้ามีการให้ค่าเปอร์เซ็นต์เพียงหนึ่งค่าเท่านั้น ค่าที่ให้นั้นจะถูกใช้เป็นค่าระดับน้ำตก และค่าระดับตั้งซึ่งจะถูกสันนิษฐานว่าเป็น 50% นี้เหมือนกับชื่อโครงการ

background-position มีค่าเริ่มต้นคือ 0% 0%，ซึ่งเท่ากับ top left ในงานงานของมัน。นี่เป็นการอธิบายเหตุผลที่ทำให้ภาพ배경เสมือนนั้นยังคงตั้งต้นจากมุมบนซ้ายของพื้นที่เอาไว้ใช้เนื้อหาขององค์ประกอบ ยกเว้นจากที่คุณตั้งค่าตำแหน่งที่ต่างออกไป

ค่าของความยาว

ค่าของความยาวระบุความเคลื่อนตัวของมุมบนซ้ายของพื้นที่ประกอบ จุดเริ่มต้นคือมุมบนซ้ายของรูปภาพ

ตัวอย่าง ถ้าตั้งค่าเป็น 50px 100px มุมบนซ้ายของรูปภาพจะตั้งอยู่ที่จุดมุมบนซ้ายของพื้นที่ประกอบขององค์ประกอบ ซ้าย 50 พิกเซล และลง 100 พิกเซล

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

ข้อสำคัญ นี่แตกต่างจากของเปอร์เซ็นต์ เพราะการหลีกเลี่ยงคือจากมุมบนซ้ายของหน้าต่างมาสู่มุมบนซ้ายของหน้าต่างอื่น หมายความว่ามุมบนซ้ายของรูปภาพจะปรับตัวตามจุดที่กำหนดด้วย background-position

สมมติฐานเกี่ยวกับการเชื่อมโยงภาพ

ถ้าเอกสารมีความยาวมาก รูปภาพบริบทจะเคลื่อนตัวด้วยเมื่อเอกสารเคลื่อนตัวลง ขณะที่เอกสารเคลื่อนตัวผ่านตำแหน่งที่รูปภาพอยู่ รูปภาพจะหายไป

คุณสามารถ background-attachment รายละเอียดป้องกันการเคลื่อนตัวนี้ ด้วยการประกาศนี้ สามารถกำหนดให้รูปภาพตั้งอยู่ตามบริเวณที่มองเห็น (fixed) ดังนั้นจึงไม่ได้รับผลกระทบจากการเคลื่อนตัว

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

ลองทดสอบด้วยตัวเอง

ค่ามาตราฐานของ background-attachment คือ scroll หมายความว่า ในสถานการณ์ปกติ บริบทจะเคลื่อนตัวตามการเคลื่อนตัวของเอกสาร

ตัวอย่างบริบท CSS

ตั้งสีพื้นหลัง
ตัวอย่างนี้แสดงวิธีการตั้งสีพื้นหลังสำหรับองค์ประกอบ
ตั้งสีพื้นหลังของข้อความ
ตัวอย่างนี้แสดงวิธีการตั้งสีพื้นหลังของข้อความบางส่วน
ตั้งรูปภาพเป็นบริบท
ตัวอย่างนี้แสดงวิธีการตั้งรูปภาพเป็นบริบท
ตั้งรูปภาพเป็นบริบท 2
ตัวอย่างนี้แสดงวิธีการตั้งรูปภาพบริบทให้กับองค์ประกอบหลายตัวพร้อมๆ
วิธีการทำให้รูปภาพบริบทถูกซ้ำ
ตัวอย่างนี้แสดงวิธีการทำให้รูปภาพบริบทถูกซ้ำ
วิธีการทำให้รูปภาพบริบทถูกซ้ำในทิศทางตั้ง
ตัวอย่างนี้แสดงวิธีการทำให้รูปภาพบริบทถูกซ้ำในทิศทางตั้ง
วิธีการทำให้รูปภาพบริบทถูกซ้ำในทิศทางน้ำตก
ตัวอย่างนี้แสดงวิธีการทำให้รูปภาพบริบทถูกซ้ำในทิศทางน้ำตก
วิธีการแสดงรูปภาพบริบทเพียงครั้งเดียว
ตัวอย่างนี้แสดงวิธีการแสดงรูปภาพบริบทเพียงครั้งเดียว
วิธีการจัดตั้งรูปภาพบริบท
ตัวอย่างนี้แสดงวิธีการจัดตั้งรูปภาพบริบทบนหน้าเว็บ
วิธีการใช้%เพื่อจัดตั้งรูปภาพบริบท
ตัวอย่างนี้แสดงวิธีการใช้เปอร์เซ็นต์เพื่อจัดตั้งรูปภาพบริบทบนหน้าเว็บ
วิธีการใช้พิกัดเซนติเมตรเพื่อจัดตั้งรูปภาพบริบท
ตัวอย่างนี้แสดงวิธีการใช้พิกัดเซนติเมตรเพื่อจัดตั้งรูปภาพบริบทบนหน้าเว็บ
วิธีการตั้งรูปภาพบริบทที่ไม่เคลื่อนตัว
ตัวอย่างนี้แสดงวิธีการตั้งรูปภาพบริบทที่ไม่เคลื่อนตัว รูปภาพจะไม่เคลื่อนตัวกับส่วนอื่นๆของหน้าเว็บ
ทั้งหมดคุณสมบัติศัพท์ของบริบทนั้นจะถูกกำหนดในการประกาศเดียว
ตัวอย่างนี้แสดงว่าเราจะใช้ความย่อตัวเพื่อจัดการทั้งหมดของคุณสมบัติพื้นหลังในการประกาศเดียว

CSS 属性背景

属性 รายละเอียด
background ความย่อตัว มีความหมายว่าจะใส่สมมาตรของคุณสมบัติพื้นหลังในการประกาศเดียว
background-attachment ภาพ 배경จะยังคงไม่เคลื่อนตัวหรือจะเคลื่อนตัวกับส่วนอื่น ๆ ของหน้า
background-color ตั้งสีพื้นหลังขององค์ประกอบ
background-image ตั้งภาพเป็นพื้นหลัง
background-position กำหนดตำแหน่งของภาพ 배경
background-repeat กำหนดว่าภาพ 배경จะทำงานซ้ำและวิธีการที่จะทำงาน