ฉันจะทำให้ขนาดพื้นหลังทำงานใน IE ได้อย่างไร

มีวิธีใดที่รู้จักกันในการทำให้ CSS style background-sizeทำงานใน IE

สายไปหน่อย แต่มันก็มีประโยชน์เช่นกัน มีตัวกรอง IE สำหรับ IE 5.5+ ซึ่งคุณสามารถใช้:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

อย่างไรก็ตามการปรับขนาดภาพทั้งหมดให้พอดีกับพื้นที่ที่จัดสรรดังนั้นหากคุณใช้สไปรต์นี่อาจทำให้เกิดปัญหา

ข้อมูลจำเพาะ: AlphaImageLoader Filter @microsoft

ฉันสร้างjquery.backgroundSize.js : ปลั๊กอิน jquery 1.5K ที่สามารถใช้เป็นทางเลือก IE8 ทางเลือกสำหรับ "ปก" และ "บรรจุ" ค่า มีลักษณะที่มีการสาธิต

ขอบคุณโพสต์นี้ css เต็มรูปแบบของฉันสำหรับความสุขข้ามเบราว์เซอร์คือ:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

มันนานมากแล้วที่ฉันทำงานเกี่ยวกับโค้ดชิ้นนี้ แต่ฉันต้องการเพิ่มความเข้ากันได้ของเบราว์เซอร์เพิ่มเติมฉันได้เพิ่มสิ่งนี้ลงใน CSS เพื่อความเข้ากันได้ของเบราว์เซอร์เพิ่มเติม:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

แม้ในภายหลัง แต่สิ่งนี้ก็มีประโยชน์เช่นกัน มี jQuery-backstretch-plugin ที่คุณสามารถใช้เป็น polyfill สำหรับขนาดพื้นหลัง: ปก ฉันคิดว่ามันจะต้องเป็นไปได้ (และค่อนข้างง่าย) ในการคว้าคุณสมบัติ css-background-url ด้วย jQuery และให้อาหารกับปลั๊กอิน jQuery-backstretch แนวปฏิบัติที่ดีคือการทดสอบพื้นหลังขนาดสนับสนุนด้วย modernizr และใช้ปลั๊กอินนี้เป็นทางเลือก

The-ปลั๊กอินลู่วิ่งที่ถูกกล่าวถึงในดังนั้นที่นี่ได้โดยง่าย jQuery-ลู่วิ่งปลั๊กอินสถานที่คือที่นี่

ในทำนองเดียวกันคุณสามารถสร้าง jQuery-plugin หรือสคริปต์ที่ทำให้ขนาดพื้นหลังทำงานในสถานการณ์ของคุณ (ขนาดพื้นหลัง: 100%) และใน IE8- ดังนั้นเพื่อตอบคำถามของคุณ: ใช่มีวิธี แต่ atm ไม่มีวิธีแบบ plug-and-play (เช่นคุณต้องทำการเข้ารหัสด้วยตัวเอง)

(ข้อจำกัดความรับผิดชอบ: ฉันไม่ได้ตรวจสอบ backstretch-plugin อย่างละเอียด แต่ดูเหมือนว่าจะเหมือนกับขนาดพื้นหลัง: ปก)

มี polyfill ที่ดีสำหรับสิ่งนั้น: louisremi / background-size-polyfill

ในการอ้างถึงเอกสาร:

อัปโหลด backgroundize.min.htc ไปยังเว็บไซต์ของคุณพร้อมกับ. htaccess ที่จะส่ง mime-type ที่ IE ต้องการ (Apache เท่านั้น - สร้างขึ้นใน nginx, node และ IIS)

ทุกที่ที่คุณใช้ขนาดพื้นหลังใน CSS ของคุณเพิ่มการอ้างอิงไปยังไฟล์นี้

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

ใน IE11 Windows 7 มันใช้งานได้สำหรับฉัน

background-size: 100% 100%;

คุณสามารถใช้ไฟล์นี้ ( https://github.com/louisremi/background-size-polyfill “ polyfill ขนาดพื้นหลัง”) สำหรับ IE8 ที่ใช้งานง่ายมาก:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

ฉันลองด้วยสคริปต์ต่อไปนี้ -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

มันใช้งานได้สำหรับฉัน!