Bagaimana untuk menetapkan jubin imej dalam css

CSS ialah singkatan Helaian Gaya Cascading, yang digunakan untuk mengawal gaya halaman web, termasuk teks, fon, warna, jarak, sempadan, latar belakang, dsb. Dalam reka bentuk halaman web, imej latar belakang sering digunakan untuk hiasan dan pengindahan, dan kadangkala imej latar belakang ini perlu dijubin untuk menyesuaikan dengan lebih baik dengan saiz dan resolusi halaman. Artikel ini akan memperkenalkan cara menyediakan jubin imej dengan CSS.

Dalam CSS, terdapat tiga cara untuk menetapkan jubin imej, iaitu: ulang (ulang), ulang mendatar (ulang-x) dan ulang menegak (ulang-y). Di bawah ini kami akan memperkenalkan secara terperinci cara menggunakan kaedah ini.

1. Ulang

Ulang ialah kaedah jubin imej yang paling biasa digunakan dalam CSS Apabila saiz imej latar belakang ditetapkan kepada lebih kecil daripada saiz bekas, imej itu akan muncul berulang kali sehingga Isi bekas. Sintaks untuk pengulangan adalah seperti berikut:

background-repeat: repeat;

Menggunakan kaedah ini sangat mudah Anda hanya perlu menambah ulang selepas atribut latar belakang dalam helaian gaya CSS, sebagai ditunjukkan di bawah:

latar belakang: url(images/bg.jpg) repeat;

Dengan cara ini imej latar belakang akan berulang pada halaman sehingga ia memenuhi keseluruhan bekas.

2. Ulangan mendatar (ulang-x)

Ulangan mendatar bermaksud imej latar belakang berulang secara mendatar dan tidak berulang secara menegak. Apabila lebar bekas lebih besar daripada imej latar belakang, imej akan dijubin secara mendatar sehingga ia memenuhi seluruh bekas tanpa berulang secara menegak. Sintaks untuk pengulangan mendatar adalah seperti berikut:

background-repeat: repeat-x;

Berbanding dengan pengulangan, anda hanya perlu menggantikan ulangan dalam sintaks dengan repeat-x, seperti yang ditunjukkan di bawah :

latar belakang: url(images/bg.jpg) repeat-x;

Dengan cara ini imej latar belakang akan dijubin secara mendatar pada halaman sehingga ia memenuhi keseluruhan bekas, bukannya mengulang secara menegak .

3. Ulangan menegak (ulang-y)

Ulangan menegak bermaksud imej latar belakang berulang secara menegak dan tidak berulang secara mendatar. Apabila ketinggian bekas lebih besar daripada imej latar belakang, imej akan dijubin secara menegak sehingga ia memenuhi seluruh bekas dan tidak akan diulang dalam arah mendatar. Sintaks untuk pengulangan menegak adalah seperti berikut:

background-repeat: repeat-y;

Berbanding dengan pengulangan, anda hanya perlu menggantikan ulang dalam sintaks dengan repeat-y, seperti yang ditunjukkan di bawah :

latar belakang: url(images/bg.jpg) repeat-y;

Dengan cara ini imej latar belakang akan dijubinkan secara menegak pada halaman sehingga ia memenuhi keseluruhan bekas, bukannya secara mendatar. Ulang di atas.

Ringkasan:

Di atas adalah tiga cara untuk menetapkan jubin imej latar belakang dalam CSS, iaitu ulang (ulang), ulang mendatar (ulang-x) dan ulang menegak (ulang-y) . Dalam aplikasi tertentu, kaedah yang berbeza boleh dipilih mengikut keperluan sebenar. Pada masa yang sama, beri perhatian untuk mengawal saiz gambar untuk mengelakkan herotan imej atau ketidakserasian saiz.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan jubin imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!