การทำงานกับภาพพื้นหลังใน CSS อาจเป็นเรื่องยุ่งยาก เพราะแม้ว่าคุณจะตั้งค่าไว้ในโค้ด แต่ก็มีปัจจัยอื่นๆ ที่อาจทำให้ภาพพื้นหลังไม่แสดงบนหน้าเว็บ
เพื่อช่วยในเรื่องนี้ สี่วิธีในการแก้ไขภาพพื้นหลังของคุณไม่ทำงาน โดยใช้ HTML และ CSS:
1. ตรวจสอบว่าไฟล์ CSS ของคุณเชื่อมโยงอย่างถูกต้องในไฟล์ HTML
เพื่อให้สไตล์ CSS ของคุณโหลดบนเว็บไซต์ของคุณ คุณต้องเพิ่ม <link> แท็กในไฟล์ HTML ของคุณ แท็กนี้ควรอยู่ภายใน <head></head> แท็ก และควรมีลักษณะดังนี้:
<link rel="stylesheet" href="/style.css">คุณจะทราบได้อย่างไรว่าไฟล์ CSS ของคุณโหลดอย่างถูกต้องหรือไม่
เครื่องหมายเดียวคือถ้าคุณโหลดเว็บไซต์และพื้นหลังเป็นสีขาว ข้อความทั้งหมดจะดูเหมือนแบบอักษร Times New Roman และไม่มีสีหรือรูปแบบอื่นๆ
คุณยังสามารถตรวจสอบเครื่องมือตรวจสอบของเบราว์เซอร์ได้ด้วยการคลิกขวาที่ใดก็ได้ในหน้าและเลือก "ตรวจสอบองค์ประกอบ" หรือกด Ctrl-Shift-I ในตัวตรวจสอบ หากคุณพบข้อผิดพลาดที่ระบุว่า 404 not found สำหรับไฟล์ CSS หรือ The resource... was blocked due to MIME type mismatch ที่บอกคุณว่ามีปัญหาในการโหลดไฟล์ CSS
หากคุณพบข้อผิดพลาดเหล่านี้และเว็บไซต์ของคุณดูไม่มีสไตล์ สิ่งแรกที่ต้องตรวจสอบคือ ใน <link> แท็ก ตรวจสอบให้แน่ใจว่า href แอตทริบิวต์กำลังโหลดชื่อไฟล์เดียวกับไฟล์ CSS จริงของคุณและเส้นทางนั้นถูกต้อง
เส้นทางต้องสัมพันธ์กับตำแหน่งที่ไฟล์ HTML ของคุณอยู่ หากไฟล์ CSS อยู่ในไดเรกทอรีเดียวกับไฟล์ HTML คุณสามารถตั้งค่า href เป็น style.css (หรือชื่อไฟล์ CSS ของคุณ)
ฉันมักจะใส่เครื่องหมายทับ / ก่อนเส้นทาง เช่น href="/style.css" . เพื่อให้แน่ใจว่าเส้นทางจะเริ่มต้นที่รูทเว็บไซต์ของคุณ
คุณอาจต้องการสิ่งนี้หากคุณมีหน้าในโฟลเดอร์ย่อยต่าง ๆ ที่โหลด <head> . เดียวกันทั้งหมด รหัส. ตัวอย่างเช่น หากคุณใช้เทมเพลต CMS (ระบบจัดการเนื้อหา) ที่มีโค้ดที่ใช้ร่วมกัน
2. ตรวจสอบให้แน่ใจว่าได้ตั้งค่าเส้นทางของรูปภาพอย่างถูกต้องใน URL ของรูปภาพพื้นหลัง
เมื่อคุณแน่ใจว่าไฟล์ CSS ของคุณเชื่อมโยงอย่างถูกต้องแล้ว ให้ตรวจสอบว่ารูปภาพนั้นได้รับการตั้งค่าอย่างถูกต้อง คุณจะต้องเปิดโปรแกรมตรวจสอบโค้ดในเบราว์เซอร์เพื่อตรวจสอบอีกครั้ง
จะทราบได้อย่างไรว่าโหลดภาพพื้นหลังถูกต้องหรือไม่
หากดูเหมือนภาพพื้นหลังจะไม่โหลด และคุณเห็นข้อผิดพลาด 404 ในตัวตรวจสอบรูปภาพ นั่นเป็นสัญญาณที่ดีว่าตัวรูปภาพเองมีปัญหา
หากเป็นเช่นนี้ ให้ตรวจสอบอีกครั้งว่าชื่อไฟล์รูปภาพตรงกับไฟล์จริง และเส้นทางใน background-image: url() กำลังไปยังตำแหน่งที่ถูกต้อง
ตำแหน่งของไฟล์รูปภาพจะต้องสัมพันธ์กับตำแหน่งของไฟล์ CSS ไม่ใช่รากของเว็บไซต์ของคุณ ดังนั้น หากไฟล์ CSS ของคุณอยู่ในโฟลเดอร์ย่อย เส้นทางอาจต้องแตกต่างจากไฟล์ CSS ที่อยู่ในรูทของคุณ
เพื่อช่วยอธิบายเรื่องนี้ สมมติว่าคุณมีโครงสร้างไฟล์เว็บไซต์ดังนี้:
(project folder)
|-- index.html
|-- (css)
|-- style.css
|-- (img)
|-- cat-pic-1.jpg
เว็บไซต์นี้มี index.html ไฟล์ในรูทโปรเจ็กต์ a css โฟลเดอร์ที่มี style.css ไฟล์และ img โฟลเดอร์ที่มีรูปภาพ cat-pic-1.jpg .
ในรูปแบบ CSS ของคุณ หากคุณต้องการโหลด cat-pic-1.jpg เป็นภาพพื้นหลัง เส้นทางของไฟล์จะต้อง:
- ขึ้นไปหนึ่งระดับจาก
cssโฟลเดอร์ - นำทางไปยัง
imgโฟลเดอร์ - จากนั้นโหลดไฟล์ภาพเอง
background-image คุณสมบัติในไฟล์ CSS ควรมีลักษณะดังนี้:background-image: url('../img/cat-pic-1.jpg') .
../ สัญลักษณ์หมายความว่าคุณจะขึ้นไปหนึ่งระดับในโครงสร้างไฟล์
คุณสามารถทำสิ่งเดียวกันได้โดยการตั้งค่า:background-image: url('/img/cat-pic-1.jpg') .
วิธีนี้ใช้เครื่องหมายทับ (/ ) เพื่อเริ่มต้นจากรูทของเว็บไซต์ จากนั้นไปที่ img โฟลเดอร์เพื่อโหลดไฟล์ภาพ
ดังนั้น ไม่ว่าคุณจะไปที่โฟลเดอร์หลักหรือเริ่มต้นที่รูทของเว็บไซต์ อย่าลืมใช้ตัวตรวจสอบโค้ดเพื่อทดสอบและตรวจสอบว่ารูปภาพกำลังโหลดหรือแสดงข้อผิดพลาด 404 หรือไม่
3. กำหนดความกว้างและ/หรือความสูงขององค์ประกอบอย่างชัดเจน
หากรูปภาพไม่ปรากฏขึ้น แต่คุณไม่ได้รับข้อผิดพลาด 404 ให้ไปที่ตัวตรวจสอบโค้ดแล้วตรวจสอบองค์ประกอบเอง
หากไม่มีเนื้อหา HTML ในองค์ประกอบ องค์ประกอบนั้นอาจมีความกว้างหรือความสูงเป็นศูนย์ (หรือทั้งสองอย่าง!) ซึ่งหมายความว่าแม้ว่าภาพพื้นหลังจะโหลดอย่างถูกต้องในทางเทคนิค แต่องค์ประกอบจะไม่ปรากฏให้เห็นโดยพื้นฐานแล้วหากเป็น 0px ขนาด.
ดูตัวอย่างด้านบนที่แสดงเว็บไซต์และตัวตรวจสอบโค้ด หากคุณวางเมาส์เหนือ .card__image องค์ประกอบในบานหน้าต่างด้านขวา ป้ายกำกับจะปรากฏเหนือองค์ประกอบในบานหน้าต่างด้านซ้าย บอกคุณว่ามี 354px ความกว้างและ 0px ส่วนสูง
นั่น 0px ความสูงหมายความว่าจะมองไม่เห็นองค์ประกอบ
หากต้องการแก้ไข ให้ตั้งค่าความสูงของ .card__image . อย่างชัดเจน องค์ประกอบเป็น height: 120px . หากองค์ประกอบอาจมีเนื้อหาข้อความที่มีความยาวต่างกัน คุณตั้งค่าเป็น min-height: 120px แทน ดังนั้นจะมีขนาดอย่างน้อย 120px สูงแต่สามารถสูงขึ้นได้หากเนื้อหาข้อความต้องการพื้นที่มากขึ้น
4. ตรวจสอบให้แน่ใจว่าคุณใช้ไวยากรณ์ที่ถูกต้องในคุณสมบัติพื้นหลัง CSS
สิ่งสุดท้ายที่คุณสามารถตรวจสอบได้คือหากคุณใช้ไวยากรณ์ที่ถูกต้องสำหรับคุณสมบัติ CSS พื้นหลังหรือไม่
ต่อไปนี้คือค่าทั่วไปที่คุณอาจใช้ พร้อมด้วยค่าที่เป็นไปได้:
background-color: #000000;background-image: url("/landscape1.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;
คุณสามารถใช้ background ชวเลขได้ คุณสมบัติที่ให้คุณรวมค่าต่าง ๆ เหล่านั้นไว้ในกฎรูปแบบเดียว:
background: #000 center/cover url("/img/landscape1.jpg") no-repeat;
หากคุณกำลังใช้คุณสมบัติชวเลขนี้ที่มีค่าจำนวนมาก ตรวจสอบให้แน่ใจว่าไวยากรณ์ถูกต้อง ลำดับของคุณสมบัติพื้นหลังที่แตกต่างกันนั้นไม่สำคัญ แต่มีข้อผิดพลาดที่ยุ่งยากอย่างหนึ่งหากคุณตั้งค่า background-size .
background-size ใช้ค่าได้ก็ต่อเมื่อเป็นไปตาม background-position ค่าด้วยเครื่องหมายทับ (/ ) ระหว่างพวกเขา. ในตัวอย่างของเรา เขียนแบบนี้: center/cover โดยที่ center คือ background-position และ cover คือ background-size .
คุณสามารถใช้ background-position คุณค่าด้วยตัวมันเองแต่หากลองใช้เพียง cover โดยตัวมันเอง กฎ CSS จะไม่ถูกต้องและ ไม่มี ของคุณสมบัติพื้นหลังจะทำงานได้เลย
หากเป็นเช่นนั้น คุณจะสามารถเห็นกฎที่ไม่ถูกต้องในตัวตรวจสอบโค้ดดังนี้:
