Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

Mencipta Kesan Latar Belakang Dilekatkan Dengan CSS

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Muhammad Nabil (you can also view the original English article)

Final product image
What You'll Be Creating

Hari ini, kami akan melangkah melalui teknik yang sangat baik yang boleh anda gunakan untuk mencipta kesan yang agak serupa dengan menatal paralaks, tetapi tidak memerlukan JavaScript; kesannya boleh dicapai melalui CSS semata-mata sahaja.

Mula dengan menyemak demo langsung untuk melihat apa yang akan anda pelajari (anda harus melihat ke desktop / komputer riba untuk melihat keputusannya). 

Teknik ini boleh digunakan untuk membuat halaman penerangan produk yang hebat, atau bahkan membuat sesuatu yang serupa dengan pembentangan Powerpoint / Keynote, dan akan paling sesuai untuk ilustrasi cerita dalam talian. 

Inilah cara untuk melakukannya.

Semuanya ada dalam CSS

Kunci teknik CSS ini adalah background-attachment:fixed tersedia untuk kami sejak CSS 2.1.  Mana-mana imej latar belakang dengan gaya ini yang digunakan di atasnya akan kekal dalam kedudukan yang relatif tetap terhadap tetingkap (bukan elemen yang menggunakannya).  Kami akan menggunakan CSS untuk menyimpan ilustrasi kami di tempatnya sementara kandungan kami menatal secara berasingan di sebelahnya.

Sesetengah perkara yang perlu diperhatikan dengan sifat CSS ini ialah imej latar belakang akan kekal bersamaan dengan tetingkap, kedudukan mereka tidak akan terjejas oleh perkara seperti margin manakala imej latar belakang biasa akan terjejas.

Anda juga perlu tahu bahawa apabila harta berfungsi dengan hebat di semua pelayar desktop, ia tidak berfungsi pada Chrome mudah alih dan kadang-kadang boleh tersekat pada pelayar mudah alih yang lain.  Oleh itu, apabila pelawat anda masih melihat imej anda dengan baik, kesan penggiliran itu sendiri harus dilihat di platform desktop.

Bagaimana Ia Dilakukan

Langkah asas untuk mencapai apa yang anda lihat dalam demo ialah:

  1. Buat elemen kontena dan tambahkan kandungan anda.
  2. Tetapkan bekas ( div di dalam bidang kami) untuk membuat padding di satu sisi dengan lebar kira-kira 50%, dengan itu menolak kandungan ke sisi lain.
  3. Tambah imej latar belakang, juga kira-kira 50% luas, dan letakkannya di seberang kandungan.
  4. Tetapkan background-attachment:fixed; dan nonton roll ajaib!

Mari lihat bagaimana ini berlaku selangkah demi selangkah.  Anda akan mahu mengambil fail sumber untuk tutorial ini supaya anda mendapat imej yang diperlukan.

1. Kaedah Asas

Mula dengan membuat folder projek dan menambah fail index.html ke dalamnya, serta folder css dengan fail bernama style.css ditambah kepadanya.  Salin dan tampal empat imej dari fail sumber zip yang telah anda muat turun ke dalam folder bernama Imej .

Tambah HTML ini ke index.html :

Apa yang kami lakukan di sini ialah menubuhkan shell HTML asas kami, termasuk stylesheet dan beberapa Font Google kami, kemudian mencipta kontena kandungan div pertama yang akan kami gunakan untuk menggunakan teknik ini.

Bekas div mempunyai tiga kelas:

  1. .content - digunakan untuk menetapkan beberapa sifat yang biasa untuk semua kontena kandungan.
  2. .right - mengenal pasti bahawa bekas ini mestilah mempunyai kandungan hak yang betul (kita juga akan bekerjasama dengan bekas kiri kanan kemudian)
  3. .illustration_01 - digunakan untuk menetapkan imej latar belakang dan warna khusus untuk bekas ini

Styling

Sekarang kita sudah bersedia untuk beberapa CSS.  Mulakan dengan menambahkan beberapa kod pemformatan dan kod normalisasi asas ke fail style.css anda:

Sekarang untuk kelas .content .  Tambah ini ke bahagian bawah lembaran gaya anda:

Kelas ini adalah tempat kebanyakan mukjizat berlaku.  Untuk teks, kami menetapkan saiz dan warna fon kami.  Untuk latar belakang, anda akan melihat kami bermula dengan menetapkan background-size menjadi 49% secara automatik.

Ini bermakna imej latar belakang akan sentiasa meregangkan atau mengecut hingga 49% dari lebar halaman, dan ketinggian akan menyesuaikan secara berkadar.  Kami menggunakan nilai 49% dan bukannya 50%, jika Firefox akan menunjukkan artifak garis pelik di tengah-tengah skrin.

Kami kemudian menetapkan background-fixed , seperti yang sudah anda ketahui dari huraian di atas, akan menjadikan imej latar belakang masih digunakan apabila kita menatal, dan membuat kedudukannya saling berkaitan dengan tetingkap dan bukannya bekas yang menggunakannya.

Akhirnya kami menetapkan background-repeat: no-repeat; Untuk memastikan gambar kami muncul sekali sahaja pada halaman.

Seterusnya, tambahkan kelas .right ke lembaran gaya anda:

Kelas terakhir ini meletakkan kandungan teks pada satu setengah skrin dan imej latar belakang di sisi yang lain.

background-position mengarahkan imej latar belakang untuk meletakkan dirinya kepada sifar piksel dari sisi kiri tetingkap dan menyesuaikan separuh dari bahagian atas tetingkap.

Akhirnya, tambah kelas .illustration_01 :

Kelas ini menentukan imej dan warna latar belakang yang kami mahu untuk kontena kandungan ini.

Semak tapak anda dan sekarang anda harus melihatnya:

Seperti yang anda tatal ke bawah, anda akan terus melihat slaid kandungan semasa imej kekal di tempatnya.

2. Tambah Container Kedua

Mari tambahkan bekas kandungan lain, yang satu dengan kandungan selari dengan sebelah kiri.

Tambahkan kandungan HTML bekas di bawah div terakhir anda:

Perhatikan kami sedang menggunakan kelas .left bukannya .right dan kami telah menaikkan nombor ilustrasi supaya kelas .illustration_01 digantikan dengan .illustration_02

Tambah dua kelas baru berikut pada lembaran gaya anda:

Kali ini kami mempunyai padding 50% yang digunakan di sebelah kanan bekas supaya kandungannya akan ditolak ke kiri, dan latar belakang diletakkan secara mendatar pada 100%, iaitu sepanjang jalan ke kanan.  Kami juga menambah warna dan imej yang berbeza ke latar belakang bekas ini.

Periksa laman web anda sekali lagi dan mula menatal ke bawah.  Apabila anda sampai ke penghujung bekas pertama, anda akan melihat yang kedua mula muncul, lap atas imej pertama anda dan secara beransur-ansur imej kedua anda akan muncul.

3. Masukkan Pemisah

Pemisah meningkatkan kesan teknik ini jika terdapat pemisah antara kedua-dua bekas jadi mari tambahnya sekarang.

Di antara dua bekas div anda, tambahkan HTML ini:

Dan tambah kelas .separator ke lembaran gaya anda:

Apabila menyegarkan laman web anda, anda kini perlu mempunyai pemisah yang baik antara bekas anda:

4. Kontena Ketiga dan Keempat

Kini anda boleh memasukkan kod untuk pemisah dan bekas kandungan yang tinggal.

Tambah HTML ini di bawah div yang sedia ada:

Dan CSS ini pada lembaran gaya anda:

Anda kini mempunyai keseluruhan skrin anda dengan memaparkan bekas ketiga dan keempat:

Dan pemisah akhir untuk menutupnya:

5. Buat Responsif

Perkara terakhir yang perlu anda lakukan adalah mengambil kira pelbagai saiz skrin.  Sekiranya viewport terlalu kecil untuk selesa menampung imej latar belakang, kami ingin mengalihkannya ke imej sebaris.

Di bahagian atas setiap bekas kandungan anda, di dalam divs pembukaan dan di atas teks, tambah gambar dengan kelas .smallscreen dan di dalamnya, letakkan teg img untuk memuatkan setiap imej yang sedang digunakan di latar belakang:

Kontena kandungan pertama:

Bekas kandungan kedua:

Kontena kandungan ketiga:

Kontena kandungan keempat

Kami akan menggunakan kelas .smallscreen untuk menyembunyikan imej inline ini secara lalai, tetapi untuk menunjukkannya, kita mesti tiba pada saiz skrin yang lebih kecil.

Tambah kelas berikut ke lembaran gaya anda:

Sekarang kami akan menambah pertanyaan media yang akan mengendalikan sama ada imej latar belakang atau imej dalam baris boleh dipaparkan.  Mereka juga akan mengurangkan lagi saiz teks dan jarak dalam susun atur supaya kita dapat menyesuaikan semuanya dengan baik dalam semua lebar paparan.

Tambah pertanyaan media ini ke lembaran kerja anda:

Empat media pertama hanya mengurangkan saiz font teks dan padding di dalam kontena kandungan secara progresif agar sesuai dengan lebar skrin yang tersedia.

Dalam pertanyaan media kelima dengan max-width: 50rem , kita menyertakan kod yang membuat kelas kelihatan .smallscreen , keluarkan padding sampingan 50% dari bekas kandungan, dan sembunyikan imej latar belakang. Apabila pertanyaan media ini bermula, kami tidak lagi melihat imej latar belakang tetap yang besar, dan kami akan melihat imej biasa di bahagian atas setiap bekas kandungan.

Kini apabila anda menyegarkan semula tapak anda, anda harus melihat dengan lancarnya jatuh bersama-sama dengan semua lebar paparan, sehingga anda melihat saiz terkecil:

Kesimpulannya

Walaupun selepas bertahun-tahun bekerja dengan CSS, saya tidak pernah terkejut dengan perkara-perkara yang lebih hebat yang boleh anda lakukan dengannya.  Dan teknik yang lebih mudah, semakin mengagumkan hasilnya.

Cuba permata kecil ini, cepat dan mudah dan anda akan ketagih!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.