CSS background-image - การใช้งานที่ถูกต้องคืออะไร?

การใช้งานที่ถูกต้องของคุณสมบัติภาพพื้นหลัง CSS คืออะไร? สิ่งสำคัญที่ฉันพยายามเข้าใจคือ

1. จำเป็นต้องอยู่ในเครื่องหมายคำพูดเช่น: background-image: url('images/slides/background.jpg');
2. มันสามารถเป็นเส้นทางสัมพัทธ์ (ดังกล่าวข้างต้น) หรือต้องเป็น URL แบบเต็มหรือไม่
3. ประเด็นอื่น ๆ ที่ฉันควรทราบเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องในเบราว์เซอร์ที่ได้มาตรฐาน

เส้นทางอาจเป็นแบบเต็มหรือแบบสัมพัทธ์ (แน่นอนถ้าภาพนั้นมาจากโดเมนอื่นต้องเป็นแบบเต็ม)

คุณไม่จำเป็นต้องใช้เครื่องหมายคำพูดใน URI ไวยากรณ์สามารถเป็น:

background-image: url(image.jpg);

หรือ

background-image: url("image.jpg");

อย่างไรก็ตามจากW3 :

อักขระบางตัวที่ปรากฏใน URI ที่ไม่ได้ระบุไว้เช่นวงเล็บอักขระช่องว่างสีขาวเครื่องหมายอัญประกาศเดี่ยว (') และเครื่องหมายอัญประกาศคู่ (") ต้องถูกหลีกเลี่ยงด้วยเครื่องหมายทับขวาเพื่อให้ค่า URI ที่ได้นั้นเป็นโทเค็น URI:' \ (' '\)'

ดังนั้นในกรณีเช่นนี้จำเป็นต้องใช้อัญประกาศหรือเครื่องหมายคำพูดคู่หรือหลีกเลี่ยงอักขระ

1. ไม่คุณไม่ต้องการคำพูด

2. ใช่คุณสามารถ. แต่โปรดทราบว่า URL สัมพัทธ์จะได้รับการแก้ไขจาก URL ของสไตล์ชีทของคุณ

3. ดีกว่าไม่ใช้คำพูด ฉันคิดว่ามีลูกค้าที่ไม่เข้าใจพวกเขา

1) การใส่คำพูดเป็นนิสัยที่ดี

2) มันสามารถเป็นเส้นทางสัมพัทธ์เช่น:

background-image: url('images/slides/background.jpg');

จะค้นหาโฟลเดอร์รูปภาพในโฟลเดอร์ที่โหลด css ดังนั้นหากรูปภาพอยู่ในโฟลเดอร์อื่นหรือออกจากแผนผังโฟลเดอร์ CSS คุณควรใช้พา ธ สัมบูรณ์หรือสัมพันธ์กับรูทพา ธ (เริ่มต้นด้วย /)

3) คุณควรใช้การประกาศที่สมบูรณ์สำหรับภาพพื้นหลังเพื่อให้มันทำงานได้อย่างสม่ำเสมอในเบราว์เซอร์ที่ได้มาตรฐานเช่น:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

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

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

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

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

background-image: url('/Images/bgi.png');

เพียงตรวจสอบโครงสร้างไดเร็กตอรี่ที่รูปภาพนั้นสมมติว่าคุณมีโฟลเดอร์ css และโฟลเดอร์อิมเมจภายนอกโฟลเดอร์ css จากนั้นคุณจะต้องใช้ "../ images / image.jpg" และมันจะทำงานเหมือนที่ฉันทำ โครงสร้างไดเรกทอรี

คุณไม่จำเป็นต้องใส่เครื่องหมายอัญประกาศหากปล่อยให้การใช้งานกำลังใช้ภาพจากไฟล์ css ของคุณ

{background-image: url(your image.png/jpg etc);}

คุณไม่จำเป็นต้องใช้เครื่องหมายคำพูดและคุณสามารถใช้เส้นทางใดก็ได้ตามต้องการ!

ดูที่หน้าอ้างอิงจุดอ้างอิงของไซต์เพื่อดูภาพพื้นหลังและURIs

1. มันไม่จำเป็นต้องอยู่ในเครื่องหมายคำพูด แต่สามารถใช้ได้ถ้าคุณต้องการ (ฉันคิดว่า IE5 / Mac ไม่รองรับเครื่องหมายคำพูดเดี่ยว)
2. ทั้งญาติและแบบสัมบูรณ์เป็นไปได้; เส้นทางสัมพัทธ์สัมพันธ์กับเส้นทางของไฟล์ css

เพียงแค่เขียนในไฟล์ css ของคุณเหมือนร้อง

background:url("images/logo.jpg")