Mencari kesan latar belakang tetap dengan imej sebaris

Baru -baru ini, semasa bekerja pada projek klien, saya memerlukan kesan visual khusus untuk imej. Imej latar belakang, menggunakan background-attachment: fixed; , dengan mudah mencapai kesan menatal tetap ini -imej tetap bergerak walaupun sebagai skrol halaman. Kesan ini, walaupun tidak sering digunakan, boleh menjadi sangat menarik, terutamanya apabila digunakan secara halus.

Jadual Kandungan

• Kenapa gunakan<img alt="Mencari kesan latar belakang tetap dengan imej sebaris" > Bukan background-image ?
• Menggunakan background-image CSS
• Trik clip-path untuk imej sebaris
• Pendekatan yang lebih baik?

Pada mulanya, saya berhasrat untuk meniru kesan tetap ini menggunakan imej sebaris (<img alt="Mencari kesan latar belakang tetap dengan imej sebaris" > ) bukannya imej latar belakang CSS. Demonstrasi kesan yang diingini boleh didapati di sini . Kod untuk demo ini berada dalam repositori git ini (nota: ini adalah projek next.js). Contoh codepen mudah dengan HTML mentah akan mengikuti.

Kenapa gunakan<img alt="Mencari kesan latar belakang tetap dengan imej sebaris" > Bukan background-image ?

Beberapa sebab memotivasi keutamaan saya untuk<img alt="Mencari kesan latar belakang tetap dengan imej sebaris" > Tag:

• Memuatkan malas yang lebih mudah.
• SEO yang lebih baik dan aksesibiliti melalui teks alt .
• Prestasi pemuatan yang dioptimumkan menggunakan srcset / sizes .
• Pemilihan imej yang dioptimumkan penyemak imbas melalui<picture></picture> tag.
• Penjimatan imej langsung untuk pengguna (tanpa DevTools).

Menggunakan<img alt="Mencari kesan latar belakang tetap dengan imej sebaris" > Tag biasanya lebih baik apabila imej dianggap kandungan dan bukannya hiasan semata -mata. Penyelesaian saya melibatkan harta CSS clip-path . Mari kita bandingkan ini dengan kaedah background-image .

1. Menggunakan background-image CSS

Pendekatan tradisional menggunakan background-image :

 .hero-seksyen {
  imej latar belakang: url ("nice_bg_image.jpg");
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: Cover;
  Latar Belakang: Pusat;
  Latar Belakang-Attachment: Tetap;
}

Walau bagaimanapun, kaedah ini mempunyai batasan. Imej tidak dianggap sebagai kandungan, memberi kesan kepada kebolehcapaian (pembaca skrin). Ia juga berfungsi secara optimum apabila imej mengisi atau berpusat di dalam viewport. Imej luar pusat memerlukan pertanyaan media untuk kedudukan yang betul di seluruh peranti yang berbeza.

2. Menggunakan helah clip-path pada imej sebaris

Penyelesaian limpahan timbunan menggunakan clip-path menyediakan alternatif:

 .Image-Container {
  Kedudukan: Relatif;
  Ketinggian: 200px;
  Clip-Path: Inset (0);
}

.Image {
  Objek-Fit: Cover;
  Kedudukan: Tetap;
  Kiri: 0;
  Atas: 0;
  Lebar: 100%;
  Ketinggian: 100%;
}

Pendekatan ini mengekalkan<img alt="Mencari kesan latar belakang tetap dengan imej sebaris" > kelebihan tag. Walau bagaimanapun, ia kurang ringkas dan clip-path memberikan cabaran. Sebagai contoh, gaya mudah seperti border-radius memerlukan pengubahsuaian ke clip-path itu sendiri. Kedudukan imej yang tepat dalam clip-path juga boleh menjadi kompleks.

Pendekatan yang lebih baik?

Pada akhirnya, saya kembali menggunakan background-image CSS, mengakui batasannya. Adakah sesiapa berjaya melaksanakan kesan menatal tetap ini dengan imej sebaris dengan cara yang lebih elegan? Saya menghargai mendengar penyelesaian anda!

Atas ialah kandungan terperinci Mencari kesan latar belakang tetap dengan imej sebaris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!