Bagaimana untuk mencapai kesan kecerunan imej latar belakang tatal lancar pada halaman web melalui CSS tulen

Bagaimana untuk mencapai kesan kecerunan imej latar belakang tatal lancar halaman web melalui CSS tulen

Dalam reka bentuk web moden, kesan latar belakang yang kaya boleh bertambah baik Estetika dan pengalaman pengguna halaman web. Antaranya, tatal lancar dan kesan kecerunan imej latar belakang adalah kaedah reka bentuk yang biasa digunakan. Artikel ini akan memperkenalkan cara untuk mencapai kesan kecerunan imej latar belakang tatal yang lancar bagi halaman web melalui CSS tulen dan memberikan contoh kod khusus.

1. Kesan tatal lancar

1. Pertama, kita perlu mencipta bekas dengan kesan tatal. Dalam HTML, anda boleh menggunakan elemen
   sebagai bekas, seperti yang ditunjukkan di bawah: kesan menatal. Ini boleh dicapai menggunakan limpahan CSS dan sifat tingkah laku tatal. Kodnya adalah seperti berikut:

   <div class="container">
     <!-- 内容部分 -->
   </div>

   Antaranya, atribut lebar dan tinggi menetapkan lebar dan tinggi bekas, atribut limpahan-y menetapkan kandungan limpahan dalam arah menegak kepada boleh ditatal, dan atribut kelakuan tatal menetapkan kelakuan tatal untuk tatal yang lancar.

   Akhir sekali, kita boleh menambah kandungan dalam bekas dan mencetuskan kesan penatalan lancar dengan menatal. Kodnya adalah seperti berikut:

   .container {
     width: 100%;
     height: 100vh;
     overflow-y: scroll;
     scroll-behavior: smooth;
   }

   2. Kesan kecerunan imej latar belakang

   Pertama, kita perlu menambah imej latar belakang pada bekas. Anda boleh menggunakan sifat imej latar belakang CSS untuk menentukan laluan imej latar belakang Kod adalah seperti berikut:

   <div class="container">
     <h1 id="欢迎来到我的网页">欢迎来到我的网页</h1>
     <!-- 内容部分 -->
   </div>

   1. Seterusnya, kita boleh menggunakan linear-. sifat kecerunan CSS untuk melaksanakan latar belakang Kesan kecerunan gambar. Kodnya adalah seperti berikut:

   .container {
     background-image: url("background.jpg");
     /* 其他样式 */
   }

   Dalam fungsi kecerunan linear, kita boleh menentukan dua nilai warna untuk mentakrifkan warna permulaan dan akhir kecerunan Di sini, rgba digunakan untuk menetapkan ketelusan warna. Dalam contoh ini, kami menggunakan warna yang sama seperti warna permulaan dan akhir, yang boleh dilaraskan mengikut keperluan sebenar.

   Akhir sekali, anda boleh menentukan cara imej latar belakang muncul dalam bekas dengan menetapkan saiz dan kedudukannya. Kodnya adalah seperti berikut:

   .container {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background.jpg");
     /* 其他样式 */
   }

   Dalam contoh ini, kami menggunakan atribut saiz latar belakang untuk menetapkan saiz imej latar belakang kepada penutup, iaitu, melaraskan saiz untuk menutup secara automatik keseluruhan bekas; gunakan atribut kedudukan latar belakang Tetapkan kedudukan imej latar belakang ke tengah, iaitu, paparkannya secara menegak dan mendatar di tengah.
   3. Ringkasnya, melalui contoh kod CSS di atas, kita boleh mencapai kesan kecerunan imej latar belakang tatal yang lancar bagi halaman web. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan kecerunan imej latar belakang tatal lancar pada halaman web melalui CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!