Latar Belakang-Repeat (harta CSS)

3

Keterangan

Property Repeat Latar Belakang mengawal sama ada atau tidak imej latar belakang diulang (berjubin), dan jika ia diulang, harta itu mentakrifkan di sepanjang paksi yang ditentukan (x, y, atau kedua-duanya) imej itu akan diulang.

Secara lalai, imej latar belakang diulang di sepanjang paksi menegak dan mendatar, dan diulangi dalam kedua-dua arah. Kami menggunakan harta latar belakang untuk menentukan paksi di mana imej harus diulang.

Apabila imej latar belakang diulang, ia pertama kali diletakkan mengikut harta latar belakang kedudukan, dan kemudian mula mengulangi dari titik itu di kedua-dua arah. Sebagai contoh, imej latar belakang yang diletakkan di kedudukan latar belakang pusat pusat (pusat elemen), dan yang mempunyai nilai berulang-ulang berulang, akan mengulangi kedua-dua arah di sepanjang paksi x dan y-iaitu, naik dan turun, kiri dan kanan, bermula dari pusat.

latar belakang elemen adalah kawasan yang diliputi oleh lebar dan ketinggian elemen tersebut (sama ada dimensi tersebut ditetapkan secara eksplisit, atau kandungan menentukannya); Ia juga termasuk kawasan yang diliputi oleh padding dan sempadan. Satu latar belakang warna (atau imej latar belakang) yang digunakan untuk elemen akan muncul di bawah kandungan latar belakang elemen itu, dan kawasan yang diliputi oleh padding dan sifat sempadan untuk elemen. Kawasan liputan ini jelas di mana elemen mempunyai sempadan telus (atau bertitik atau putus -putus), dan latar belakang dilihat di bawah sempadan (atau di antara titik -titik). Perhatikan bahawa versi Internet Explorer sehingga dan termasuk 6 tidak menyokong sempadan telus.

Beberapa bidang elemen yang dipersoalkan mesti dapat dilihat jika imej latar belakang ditunjukkan. Jika elemen tidak mempunyai ketinggian intrinsik (sama ada seperti yang ditakrifkan oleh kandungannya, atau oleh dimensinya), latar belakang tidak akan dapat dilihat. Jika elemen hanya mengandungi kanak -kanak terapung yang belum dibersihkan -lihat jelas -tiada latar belakang akan ditunjukkan, kerana ketinggian elemen akan menjadi sifar.

Jubin dan kedudukan imej latar belakang pada unsur-unsur inline tidak ditakrifkan dalam spesifikasi CSS2.1, tetapi ia mungkin ditangani dalam versi masa depan.

Contoh

Peraturan gaya ini menyebabkan imej latar belakang yang diberikan kepada elemen dengan "contoh" ID untuk mengulangi paksi

x

:

nilai

Ulang

#example{
  background-repeat: repeat-x;
}

Ulang nilai memastikan bahawa imej latar belakang diulangi dalam kedua-dua arah (iaitu, kiri dan kanan, dan ke atas dan ke bawah), dan di sepanjang kedua-dua paksi, sehingga latar belakang elemen dilindungi sepenuhnya.

READE-X

Nilai REPET-X memastikan bahawa imej latar belakang diulang hanya di sepanjang paksi x (iaitu, paksi mendatar di kedua-dua arah dan kanan) sehingga latar belakang unsur dilindungi sepenuhnya di sepanjang paksi itu.

Ulang-y

nilai ulangan-y memastikan bahawa imej latar belakang hanya diulangi di sepanjang paksi

y (iaitu, paksi menegak dalam kedua-dua arah dan ke bawah) sehingga latar belakang unsur dilindungi sepenuhnya di sepanjang paksi itu.

no-repeat

Nilai No-Repeat memastikan bahawa imej latar belakang tidak diulangi dalam mana-mana arah, dan hanya satu contoh imej yang akan diletakkan pada koordinat yang ditentukan oleh kedudukan latar belakang.

jika tiada kedudukan latar belakang telah ditentukan, Imej diletakkan di kedudukan leften leften unsur (0,0).

Soalan Lazim (Soalan Lazim) Mengenai Properti Latar Belakang CSS

Apakah perbezaan antara 'REPET-X' dan 'READE-Y' dalam sifat latar belakang CSS? Apabila 'Repeat-X' digunakan, imej latar belakang hanya diulang secara mendatar, mewujudkan corak berterusan dari kiri ke kanan. Sebaliknya, apabila 'ulangan-y' digunakan, imej latar belakang hanya diulangi secara menegak, mewujudkan corak berterusan dari atas ke bawah. Ciri-ciri ini berguna apabila anda ingin mengawal arah pengulangan imej latar belakang.

Bagaimanakah nilai 'tidak berulang' berfungsi dalam sifat latar belakang CSS? Apabila nilai ini ditetapkan, imej latar belakang akan diletakkan pada kedudukan yang ditentukan oleh harta latar belakang dan tidak akan mengulangi atau jubin. Ini amat berguna apabila anda mempunyai imej tunggal yang anda mahu gunakan sebagai latar belakang tanpa sebarang pengulangan. Ini amat berguna apabila anda bekerja dengan pelbagai imej latar belakang. Anda boleh menentukan nilai ulangan yang berbeza untuk setiap imej latar belakang dengan memisahkan setiap nilai dengan koma. Nilai pertama sepadan dengan imej latar belakang pertama, nilai kedua kepada imej kedua, dan sebagainya.

Bagaimanakah nilai 'ruang' berfungsi dalam sifat latar belakang CSS? Imej -imej itu sama rata, dan imej pertama dan terakhir menyentuh tepi elemen. Jika ruang yang ada tidak mencukupi untuk satu lagi imej, imej -imej itu disesuaikan agar sesuai. Ini berguna apabila anda ingin mengekalkan ruang yang konsisten di antara setiap pengulangan imej latar belakang. Imej diubah saiznya supaya dapat diulangi sebilangan kali dalam elemen. Ini berguna apabila anda ingin memastikan bahawa keseluruhan imej latar belakang dapat dilihat tanpa sebarang keratan. Ini bermakna bahawa nilai berulang imej latar belakang elemen akan sama dengan elemen induknya. Apabila digunakan dengan kecerunan, harta latar belakang akan mengulangi corak kecerunan mengikut nilai yang ditentukan. Ini berguna apabila anda ingin mencipta kesan kecerunan yang berulang. Ini bermakna bahawa imej latar belakang akan mengulangi kedua-dua secara mendatar dan menegak, yang merupakan kelakuan lalai dari sifat latar belakang yang berulang. Ini bermakna imej latar belakang akan mengulangi kedua -dua secara mendatar dan menegak.

Bolehkah saya mengawal pengulangan imej latar dalam satu arah sahaja? Anda boleh menggunakan nilai 'REPET-X' untuk mengulangi imej secara mendatar, atau nilai 'ulangan-y' untuk mengulangi imej secara menegak. Ini berguna apabila anda ingin membuat corak mendatar atau menegak dengan imej latar belakang.

Atas ialah kandungan terperinci Latar Belakang-Repeat (harta CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!