วิธีเพิ่มพื้นหลัง CSS ที่สนุกในเว็บไซต์ของคุณ

Sep 11, 2025

วิธีการ

เวลาเป็นพื้นหลังของเว็บเพจเป็นภาพปูกระเบื้องเล็ก ๆ - และมักน่าเกลียดการทำร้ายดวงตาของผู้มาเยือนทุกคน วันนี้ภูมิหลังเป็นรากฐานของการออกแบบกราฟิกออนไลน์มาก

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

ครอบคลุมทุกสิ่งในพื้นที่นี้จะต้องมีหนังสือและดังนั้นเราจึงเลือกจุดเริ่มต้นที่สำคัญเพื่อให้คุณไปและลิงก์ตัวเลือกแปลก ๆ สำหรับคุณในการสำรวจเพิ่มเติม สนุก!

เพิ่มพื้นหลัง CSS ไปยังองค์ประกอบของเว็บเพจ

พื้นหลัง CSS ต้องการ พื้นหลัง ทรัพย์สินของชวเลขหรือการใช้คุณสมบัติเฉพาะเพิ่มเติมเช่น (แต่ไม่ จำกัด เพียง): สีพื้นหลัง ; ภาพพื้นหลัง ; ตำแหน่งพื้นหลัง ; ขนาดพื้นหลัง ; พื้นหลัง - ทำซ้ำ ; และ สิ่งที่แนบมาพื้นหลัง . สิ่งเหล่านี้สามารถกำหนดไว้สำหรับพื้นหลังของเว็บเพจ (ผ่าน ร่างกาย ตัวเลือก) หรือองค์ประกอบของหน้าเช่นส่วนหัว Divs และอื่น ๆ

ในระดับพื้นฐานที่สุดคุณสามารถใช้ พื้นหลัง ในการเปลี่ยนหน้าสีแดง:

 ร่างกาย {
 พื้นหลัง: สีแดง;
 }

ก้าวหน้าไปกว่านี้เล็กน้อยคุณสามารถเพิ่มรูปภาพที่อยู่กึ่งกลางแนวนอน 20px จากด้านบนของภาชนะบรรจุไม่ซ้ำและแก้ไขในขณะที่หน้าเว็บเลื่อน:

 ร่างกาย {
 พื้นหลัง: URL (image.png) center 20px ไม่มีการแก้ไขซ้ำ;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — ภาพเป็นพื้นหลัง (หมายเหตุ: หลีกเลี่ยงความแตกต่างในระดับต่ำนี้ในการออกแบบของคุณเอง)

หากคุณต้องการที่จะเขียนสิ่งนั้นออกโดยไม่ต้องใช้ พื้นหลัง ชวเลขมันจะมีลักษณะเช่นนี้:

 ร่างกาย {
 พื้นหลังภาพ: URL (image.png);
 ตำแหน่งพื้นหลัง: ศูนย์ 20px;
 พื้นหลังซ้ำ: ไม่ทำซ้ำ;
 สิ่งที่แนบมาพื้นหลัง: แก้ไข;
 }

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

 ร่างกาย {
 พื้นหลัง: URL (image.png) center 20px no- ทำซ้ำคงที่, URL (Image-2.png) กึ่งกลางศูนย์ไม่ทำซ้ำคงที่;
 }

ในกรณีนี้ภาพหนึ่งภาพจะปรากฏขึ้นตามตัวอย่างก่อนหน้าและ 'ด้านล่าง' โดยตรงในกึ่งกลางของพื้นที่เนื้อหา

ปรับขนาดภาพพื้นหลัง

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

 ขนาดพื้นหลัง: 200px 50px;

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

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'มี' (ด้านบน) กับค่า 'ปก' (ด้านล่าง)

โปรดทราบว่าคุณสามารถเพิ่ม ขนาดพื้นหลัง เพื่อ พื้นหลัง นิยามชวเลข - วางไว้หลังจากนั้น ตำแหน่งพื้นหลัง ค่าที่มีเครื่องหมายเฉือนไปข้างหน้าแยกทั้งสอง:

 พื้นหลัง: URL (image.png) center 20px / ไม่มีการแก้ไขซ้ำ

ใช้ภาพพื้นหลังเรตินาความละเอียดสูง

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

ตัวอย่างเช่นลองนึกภาพ Div ด้วย id ของ โลโก้ . สิ่งนี้เหมาะสมกับโลโก้ที่ใช้เป็นพื้นหลังใน CSS มันเป็นตาราง 150 พิกเซลและดังนั้น CSS พื้นฐานที่คุณต้องการคือ:

 #Logo {
 ความกว้าง: 150px;
 ความสูง: 150px;
 พื้นหลัง: URL (logo.png) ไม่มีการทำซ้ำ;
 }

ความละเอียดสูงมีความซับซ้อนในสิ่งต่าง ๆ เราไม่ต้องการบังคับฮาร์ดแวร์ที่เก่ากว่าในการโหลดรูปภาพที่ใหญ่กว่าและดังนั้นจึงต้องใช้แบบสอบถามสื่อในการโหลดโลโก้ความละเอียดสูงกว่าเฉพาะฮาร์ดแวร์ที่รองรับ

 @Media (-webkit-min-device-pixel-ratio: 2),
 (Min-Resolution: 192dpi) {
  #Logo {
   พื้นหลังภาพ: URL ([email protected]);
  }
 }

ปัญหาตอนนี้คือภาพความละเอียดสูง @ 2x คือ 300 พิกเซลสแควร์ (เนื่องจากมีความละเอียดเป็นสองเท่าของต้นฉบับ) แต่ใช้เป็นพื้นหลังสำหรับคอนเทนเนอร์ขนาด 150 พิกเซล ดังนั้น ณ จุดนี้คุณจะเห็นเพียงหนึ่งในสี่ของมัน

A high-res image before a resize fix — ภาพความละเอียดสูงก่อนที่จะปรับขนาดการแก้ไข

สิ่งนี้ได้รับการแก้ไขโดยการกำหนดเฉพาะ ขนาดพื้นหลัง คุ้มค่า #Logo :

 #Logo {
 ความกว้าง: 150px;
 ความสูง: 150px;
 พื้นหลัง: URL (logo.png) ไม่มีการทำซ้ำ;
 ขนาดพื้นหลัง: 150px 150px;
 }

โลโก้ความละเอียดสูงตอนนี้อย่างอบอุ่นภายในภาชนะบรรจุ

วิธีที่ทันสมัยมากขึ้นในการทำงานกับความละเอียดพื้นฐานหลายอย่างและการบรรลุผลเหมือนกันคือ CSS4 ชุดภาพ :

 #Logo {
 ภาพพื้นหลัง: ชุดภาพ (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

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

ทำงานกับช่องและการไล่ระดับสีอัลฟ่า

เคล็ดลับสุดท้ายของเราในบทความนี้อย่างรวดเร็ว (ในข้อกำหนดการสอนเว็บไซต์) ข้อกังวลเกี่ยวกับช่องและการไล่ระดับสีอัลฟ่า เมื่ออินเทอร์เน็ตกำลังขับเคลื่อนด้วยไอน้ำคุณมักจะมีนักออกแบบใช้ GIFs 'Checkerboard' เพื่อจำลองช่องอัลฟา (ทุกพิกเซลอื่น ๆ มีความโปร่งใส) ตอนนี้คุณเพียงแค่กำหนดสีใน RGBA:

 หลัก {
 พื้นหลัง: RGBA (255,255,255,0.7);
 }

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

Alpha channels, gradients, and some questionable colour choices — ช่องอัลฟาการไล่ระดับสีและตัวเลือกสีที่น่าสงสัยบางอย่าง

ในทำนองเดียวกันนักออกแบบเว็บไซต์ที่ใช้ในการส่งออกและกระเบื้อง GIFs หากพวกเขาต้องการการไล่ระดับสีเป็นพื้นหลัง แต่นั่นไม่จำเป็นอีกต่อไปเว้นแต่คุณต้องการปาร์ตี้อย่างที่มันเป็นปี 1999 วันนี้คุณจะต้องการ CSS3 การไล่ระดับเชิงเส้น และ รัศมี - ไล่ระดับสี คุณสมบัติที่คุณกำหนดทิศทางและสีหยุด

นี่คือกฎ CSS ที่มีการไล่ระดับสีพื้นฐาน:

 H1 {
 พื้นหลัง: การไล่ระดับสีเชิงเส้น (ขวา, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

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

การใช้มุมและจุดหยุดสีหลายสีคุณสามารถไปได้มากต่อไปกับการไล่ระดับสี เพื่อทดลองลองใช้ Photoshop-Like เครื่องกำเนิดการไล่ระดับสี CSS และตรวจสอบเอาต์พุตโค้ด (เป็นผู้พิพากษาตัวอย่างที่เชื่อมโยงเพิ่มไวยากรณ์สำหรับเบราว์เซอร์รุ่นเก่า - เพียงแค่คว้า การไล่ระดับเชิงเส้น สายสำหรับการใช้งานของคุณเอง)

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — ในฐานะที่เป็นรูปแบบ CSS แสดงแกลเลอรี่คุณสามารถทำสิ่งที่แฟนซีได้จริงด้วยการไล่ระดับสี CSS

หากคุณนึกถึงการตรวจสอบสิ่งที่ผู้เชี่ยวชาญด้านเว็บที่มีประสบการณ์สามารถทำได้กับการไล่ระดับสีและ ขนาดพื้นหลัง ตรวจสอบ Lea Verou's แกลลอรี่รูปแบบ CSS3 . ที่นั่นคุณจะพบตัวอย่างสดที่ใช้การไล่ระดับสี CSS เพื่อสร้างรูปแบบพื้นหลังที่น่าประทับใจทุกชนิด

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

ลิงก์ที่เกี่ยวข้อง:

คำแนะนำในการเขียน CSS ที่ดีกว่า
สร้างเค้าโครงที่ตอบสนองด้วยกริด CSS
เทคนิค CSS เพื่อปฏิวัติรูปแบบของคุณ

วิธีเพิ่มพื้นหลัง CSS ที่สนุกในเว็บไซต์ของคุณ

เพิ่มพื้นหลัง CSS ไปยังองค์ประกอบของเว็บเพจ

ปรับขนาดภาพพื้นหลัง

ใช้ภาพพื้นหลังเรตินาความละเอียดสูง

ทำงานกับช่องและการไล่ระดับสีอัลฟ่า

วิธีการ - บทความยอดนิยม

วิธีทำความสะอาด Paintbrushes: คู่มือที่ชัดเจน

วิธีการวาดสัตว์: 15 เคล็ดลับยอดนิยม

10 เคล็ดลับสำหรับการเรียนรู้แอปภาพถ่ายของ Apple

รูปแบบที่ยืดหยุ่นแฟชั่นด้วย CSS Grid

วิธีจัดการคลาส CSS ด้วย JavaScript

วิธีการเข้ารหัสเครื่องหมายความจริงเพิ่ม

วาดภาพเหมือนต้นแบบเก่า

Darth Vader ใน Zbrush

หมวดหมู่