Inilah cara untuk menambah imej reka bentuk responsif menggunakan CSS
Lihat laman web yang popular hari ini dan satu rawatan reka bentuk yang anda pasti dapat lihat adalah imej latar belakang skrin yang besar. Salah satu cabaran dengan menambahkan imej ini adalah dari amalan terbaik yang harus dilihat oleh laman web terhadap saiz dan peranti skrin yang berbeza - pendekatan yang dikenali sebagai reka bentuk web yang responsif .
Oleh kerana susun atur tapak web anda berubah dan skala dengan saiz skrin yang berlainan, begitu juga gambar-gambar latar belakang ini akan skala saiz mereka dengan sewajarnya.
Sebenarnya, "imej cecair" ini adalah salah satu bahagian penting laman web responsif (bersama dengan grid bendalir dan pertanyaan media). Tiga keping ini menjadi asas reka bentuk web yang responsif sejak awal, tetapi sementara ia sentiasa agak mudah untuk menambah imej inline responsif ke laman web (gambar dalam baris adalah grafik yang dikodkan sebagai sebahagian daripada markup HTML), melakukan sama dengan imej latar belakang (yang digambarkan ke dalam halaman menggunakan sifat latar belakang CSS) telah memberikan cabaran yang signifikan kepada banyak pereka web dan pemaju depan. Terima kasih, penambahan "saiz latar belakang" dalam CSS telah menjadikan ini mungkin.
Dalam artikel yang berasingan, saya membahas cara menggunakan saiz latar belakang hartanah CSS3 untuk meregangkan imej agar sesuai dengan tetingkap, tetapi ada cara yang lebih baik, lebih berguna untuk digunakan untuk harta ini. Untuk melakukan ini, kami akan menggunakan kombinasi hartanah dan nilai berikut:
saiz latar belakang: penutup;
Ciri penutup kata kunci memberitahu penyemak imbas untuk skala imej agar sesuai dengan tetingkap, tidak kira berapa besar atau kecil tetingkap itu mendapat. Imej itu berskala untuk menutup seluruh skrin, tetapi nisbah asal dan nisbah aspek tetap utuh, menghalang imej itu sendiri daripada diputarbelitkan.
Imej diletakkan di tingkap sekecil mungkin supaya seluruh permukaan tetingkap dilindungi. Ini bermakna anda tidak akan mempunyai sebarang tempat kosong di halaman anda atau mana-mana penyelewengan pada imej, tetapi ia juga bermakna beberapa imej mungkin dimatikan bergantung pada nisbah aspek skrin dan imej yang dipersoalkan. Contohnya, tepi imej (sama ada atas, bawah, kiri, atau kanan) boleh dipotong pada imej, bergantung kepada nilai yang anda gunakan untuk harta kedudukan latar belakang. Sekiranya anda mengarahkan latar belakang ke "kiri atas", apa-apa yang berlebihan pada imej akan keluar dari sisi bawah dan kanan. Jika anda memusatkan imej latar belakang, kelebihannya akan hilang dari semua sisi, tetapi kerana kelebihan itu tersebar, kesan pada satu pihak akan berkurang.
Cara Menggunakan saiz latar belakang: perlindungan;
Apabila mencipta imej latar belakang anda, adalah idea yang baik untuk membuat imej yang agak besar. Walaupun penyemak imbas boleh membuat imej lebih kecil tanpa kesan ketara terhadap kualiti visual, apabila penyemak imbas menimbulkan imej kepada saiz yang lebih besar daripada dimensi asal, kualiti visual akan rosak, menjadi kabur dan pixelated. Kelemahan untuk ini adalah bahawa halaman anda memukul prestasi apabila anda menyampaikan imej gergasi ke semua skrin.
Apabila anda melakukan ini, pastikan anda mempersiapkan imej dengan betul untuk kelajuan muat turun dan penghantaran web . Pada akhirnya, anda perlu mencari medium bahagia antara saiz imej dan kualiti yang cukup besar dan saiz fail yang munasabah untuk kelajuan muat turun.
Salah satu cara yang biasa untuk menggunakan imej latar belakang skala adalah apabila anda mahu imej itu mengambil latar belakang penuh halaman, sama ada halaman itu luas dan dilihat pada komputer desktop atau lebih kecil dan sedang dihantar ke pegang tangan, mudah alih peranti.
Muat naik imej anda ke hos web anda dan tambahkan ke CSS anda sebagai imej latar belakang:
background-image: url (fireworks-over-wdw.jpg);
ulangi latar belakang: tiada ulang;
latar belakang: pusat pusat;
lampiran-lampiran: tetap;
Tambah penyemak imbas awalan CSS dahulu:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Kemudian tambahkan harta CSS:
saiz latar belakang: penutup;
Menggunakan Imej Yang Berbeza yang Mengubah Peranti Berbeza
Walaupun reka bentuk responsif untuk desktop atau pengalaman komputer riba adalah penting, pelbagai peranti yang boleh mengakses Web telah berkembang dengan ketara, dan pelbagai saiz skrin yang lebih besar dilengkapi dengan itu.
Seperti yang dinyatakan sebelum ini, memuat imej latar belakang responsif yang sangat besar pada telefon pintar, sebagai contoh, bukan reka bentuk yang cekap atau lebar lebar.
Ketahui bagaimana anda boleh menggunakan pertanyaan media untuk memberikan imej yang sesuai dengan peranti yang akan dipaparkan, dan teruskan keserasian laman web anda dengan peranti mudah alih.
Artikel asal oleh Jennfier Krynin. Disunting oleh Jeremy Girard 9/12/17