การใช้ URL สัมพัทธ์ในไฟล์ CSS ตำแหน่งใดที่สัมพันธ์กับ

เมื่อกำหนดบางอย่างเช่น URL ภาพพื้นหลังในไฟล์ CSS เมื่อใช้ URL ที่สัมพันธ์กันมันจะสัมพันธ์กับที่ไหน? ตัวอย่างเช่น:

สมมติว่าไฟล์/stylesheets/base-styles.cssมี:

div#header { 
    background-image: url('images/header-background.jpg');
}

หากฉันรวมสไตล์ชีทนี้ไว้ในเอกสารที่แตกต่างกันผ่านทาง<link ... />URL ที่เกี่ยวข้องในไฟล์ CSS จะสัมพันธ์กับเอกสารสไตล์ชีทใน/stylesheets/หรือสัมพันธ์กับเอกสารปัจจุบันที่รวมอยู่ด้วยหรือไม่ เส้นทางที่เป็นไปได้เช่น:

/item/details.html
/about/index.html
/about/extra/other.html
/index.html

ตามW3 :

URL บางส่วนถูกตีความสัมพันธ์กับแหล่งที่มาของสไตล์ชีทไม่ใช่สัมพันธ์กับเอกสาร

/stylesheets/ดังนั้นในการตอบคำถามของคุณก็จะมีความสัมพันธ์กับ

หากคุณคิดเกี่ยวกับสิ่งนี้สิ่งนี้สมเหตุสมผลเนื่องจากสามารถเพิ่มไฟล์ CSS ไปยังหน้าในไดเรกทอรีที่แตกต่างกันดังนั้นการกำหนดมาตรฐานให้กับไฟล์ CSS หมายความว่า URL จะทำงานได้ทุกที่ที่สไตล์ชีทมีการเชื่อมโยง

มันสัมพันธ์กับไฟล์ CSS

มันเกี่ยวข้องกับสไตล์ชีท แต่ฉันขอแนะนำให้สร้าง URL ที่เกี่ยวข้องกับ URL ของคุณ:

div#header { 
  background-image: url(/images/header-background.jpg);
}

ด้วยวิธีนี้คุณสามารถย้ายไฟล์ไปมาได้โดยไม่จำเป็นต้องปรับโครงสร้างไฟล์เหล่านั้นอีกในอนาคต

เพื่อสร้างสไตล์ชีตแบบแยกส่วนที่ไม่ได้ขึ้นอยู่กับตำแหน่งที่แน่นอนของทรัพยากรผู้เขียนอาจใช้ URIs ที่สัมพันธ์กัน URI ที่สัมพันธ์กัน (ตามที่กำหนดไว้ใน[RFC3986] ) ได้รับการแก้ไขให้เป็น URI เต็มรูปแบบโดยใช้ URI ฐาน RFC 3986, ส่วนที่ 5, กำหนดอัลกอริทึมเชิงบรรทัดฐานสำหรับกระบวนการนี้ สำหรับ CSS สไตล์ชีท URI พื้นฐานคือของสไตล์ชีทไม่ใช่ของเอกสารต้นฉบับ

ตัวอย่างเช่นสมมติว่ากฎต่อไปนี้:

body { background: url("yellow") }

ตั้งอยู่ในสไตล์ชีตที่กำหนดโดย URI:

http://www.example.org/style/basic.css

พื้นหลังของ BODY ของเอกสารต้นฉบับจะถูกปูด้วยภาพใดก็ตามที่อธิบายโดยทรัพยากรที่กำหนดโดย URI

http://www.example.org/style/yellow

ตัวแทนผู้ใช้อาจแตกต่างกันไปตามวิธีจัดการ URIs หรือ URIs ที่ไม่ถูกต้องซึ่งกำหนดทรัพยากรที่ไม่พร้อมใช้งานหรือไม่เหมาะสม

นำมาจากCSS 2.1 สเปค

สำหรับ CSS สไตล์ชีท URI พื้นฐานคือของสไตล์ชีทไม่ใช่ของเอกสารต้นฉบับ

(มีอะไรจะเสียอีก IMNSHO)

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

พา ธ คำร้องขอที่แม็พสำหรับบันเดิลแบบย่อควรเป็น "/ originalcssfolder / minifiedbundlename" ไม่ใช่แค่ "minifiedbundlename"

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

สิ่งนี้ใช้ได้สำหรับฉัน เพิ่มสองจุดและเฉือน

body{
    background: url(../images/yourimage.png);
}

ลองใช้:

body {
  background-attachment: fixed;
  background-image: url(./Images/bg4.jpg);
}

Images เป็นโฟลเดอร์ที่ถือรูปภาพที่คุณต้องการโพสต์