Bagaimana cara membuat ukuran latar bekerja di IE?

188

Apakah ada cara yang diketahui untuk membuat gaya CSS background-sizeberfungsi di IE?

css internet-explorer

— JD Isaacks
sumber

1

Apa efek yang Anda coba dapatkan?

— ZippyV

@ ZippV Saya memiliki div yang lebarnya sekitar 250 piksel. tetapi gambar latar belakang lebarnya 300px. Saya ingin gambar latar belakang sepenuhnya masuk (ukuran latar: 100%) sehingga tidak terputus. Kemudian :hoversaya ingin ukuran latar belakang berubah ke lebar 300px penuh (ukuran latar: otomatis) untuk menciptakan ilusi zoom

— JD Isaacks

1

Anda dapat mencapai efek yang sama dengan menggunakan tag img. Jika Anda membutuhkan sesuatu di atasnya, gunakan indeks-z.

— ZippyV

1

@ John mempertimbangkan untuk mengubah jawaban yang diterima jika solusi Dan berhasil untuk Anda!

— Pekka

@ZippyV Tag IMG terkadang memiliki efek samping yang tidak diperlukan, misalnya ia dapat dipilih atau diklik kanan. Ini kadang-kadang OK, kadang tidak.

— peterh

312

Agak terlambat, tapi ini juga bisa berguna. Ada filter IE, untuk IE 5.5+, yang dapat Anda terapkan:

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

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

Namun, ini menskala seluruh gambar agar pas di area yang dialokasikan, jadi jika Anda menggunakan sprite, ini dapat menyebabkan masalah.

Spesifikasi: Filter AlphaImageLoader @ microsoft

— Dan
sumber

12

Saya bertanya-tanya mengapa MS tidak hanya mengimplementasikan fungsi itu menggunakan CSS. Terima kasih banyak!

— Martin Andersson

2

Versi IE mana yang mendukung ini?

— ᆼ ᆺ ᆼ

8

Jika Anda menggunakan tautan dan tombol di dalam elemen yang kami tentukan ini, tautan dan tombol itu tidak akan berfungsi. Adakah yang tahu metode untuk memperbaikinya?

— rubyprince

2

Saya harus menambahkan position: relative; z-index: 999untuk input, tombol, di dalam

— div tersebut

10

Metode skala tidak mempertahankan rasio .. Jadi yang terbaik adalah elemen Anda memiliki rasio yang sama dengan gambar Anda.

— Yves Van Broekhoven

45

Saya membuat jquery.backgroundSize.js : plugin jquery 1.5K yang dapat digunakan sebagai fallback IE8 untuk nilai "cover" dan "mengandung". Lihatlah demo .

— Louis-Rémi
sumber

12

Menurut dokumentasi jquery.backgroundSize.js, plugin tersebut sudah usang, dan mereka merekomendasikan background-size-polyfill sebagai gantinya.

— VOIDHand

Versi yang diperbarui tidak berfungsi dengan background-position: fixed.

— Ryan Burney

@ VOIDTapi kedua filter dan polyfill tidak bekerja untuk saya, saya menggunakan jquery.backgroundSize untuk sukses

— Chris Marisic

21

Berkat posting ini, css lengkap saya untuk kebahagiaan lintas browser adalah:

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

Sudah begitu lama sejak saya mengerjakan potongan kode ini, tetapi saya ingin menambahkan lebih banyak kompatibilitas browser. Saya menambahkan ini ke CSS saya untuk lebih banyak kompatibilitas browser:

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

— Scott Dallas
sumber

@ Gaurav123 try-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

— honk31

5

ini membuat ie8 saya untuk menampilkan gambar latar belakang dua kali - satu dengan dimensi skala dan yang kedua latar belakang tidak berukuran besar.

— arekk

ie7: Terlihat OK, tetapi tidak bisa lagi mengklik tautan. (Mengapa ie7? Situs pemerintah sangat lambat diperbarui)

— Robbie Matthews

5

Bahkan nanti, tapi ini bisa berguna juga. Ada jQuery-backstretch-plugin yang dapat Anda gunakan sebagai polyfill untuk ukuran latar belakang: sampul. Saya kira itu mungkin (dan cukup sederhana) untuk mengambil properti css-background-url dengan jQuery dan memasukkannya ke plugin jQuery-backstretch. Praktik yang baik adalah menguji dukungan ukuran latar belakang dengan modernizr dan menggunakan plugin ini sebagai cadangan.

Plugin backstretch disebutkan di SO di sini . Situs jQuery-backstretch-plugin ada di sini .

Dengan cara yang sama Anda bisa membuat jQuery-plugin atau skrip yang membuat ukuran latar berfungsi di situasi Anda (ukuran latar: 100%) dan di IE8-. Jadi untuk menjawab pertanyaan Anda: Ya ada cara tetapi atm tidak ada solusi plug-and-play (yaitu Anda harus melakukan beberapa pengkodean sendiri).

(Penafian: Saya tidak memeriksa backstretch-plugin dengan seksama tetapi sepertinya melakukan hal yang sama dengan ukuran latar: cover)

— metatron
sumber

5

Ada polyfill yang bagus untuk itu: louisremi / background-size-polyfill

Mengutip dokumentasi:

Unggah backgroundsize.min.htc ke situs web Anda, bersama dengan .htaccess yang akan mengirim tipe mime yang diperlukan oleh IE (hanya Apache - ini dibangun di nginx, node dan IIS).

Di mana-mana Anda menggunakan ukuran latar belakang di CSS Anda, tambahkan referensi ke file ini.
.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);
}

— Dorian
sumber

Polyfill ini hanya berfungsi. ukuran latar: menutupi atau mengandung di IE8. Tanpa muss, tidak repot.

— jimlongo

pendekatan ini mendukung keduanya containdan cover. Ini berisi 5.7KB tidak terlalu buruk karena akan ditransfer dalam satu paket jaringan.

— SMMousavi

2

Di IE11 Windows 7 ini bekerja untuk saya,

background-size: 100% 100%;

— Jana
sumber

0

Anda dapat menggunakan file ini ( https://github.com/louisremi/background-size-polyfill "polyfill ukuran latar belakang") untuk IE8 yang sangat mudah digunakan:

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

0

Saya mencoba dengan skrip berikut -

.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;
}

Itu berhasil untuk saya!

— Bulla
sumber

untuk versi apa?

— nihiser