Penjana Corak Latar Belakang CSS

Alat ini menjana corak latar belakang berulang menggunakan gradien CSS sahaja — tiada fail imej diperlukan. Pilih titik polka, jalur pepenjuru, papan dam, atau garisan grid, laraskan warna dan jarak, dan salin CSS background-image terus ke dalam helaian gaya anda.

Apakah alat ini?

CSS boleh melukis corak berulang tanpa sebarang fail imej dengan menggunakan gradien — radial-gradient() dan linear-gradient() — sebagai background-image, digabungkan dengan background-size yang lebih kecil daripada elemen supaya gradien berjubin dan berulang. Titik polka menggunakan repeating radial-gradient, jalur dan papan dam menggunakan linear-gradient() berulang atau berlapis, dan garisan grid menggunakan dua linear-gradient() bertindih.

Alat ini membina pengisytiharan gradien tersebut untuk anda. Pilih jenis corak, laraskan warna corak, warna latar belakang, dan jarak, dan lihat pratonton langsung dikemas kini — kemudian salin CSS background-image dan background-size yang tepat.

Sumber: CSS Images Module Level 3, W3C — mentakrifkan repeating-linear-gradient() dan repeating-radial-gradient(), fungsi yang menjadi asas corak-corak ini.

Kenapa guna alat ini?

Tiada fail imej, tiada permintaan HTTP — corak adalah CSS tulen dan dipaparkan serta-merta pada mana-mana resolusi, termasuk skrin retina/DPI tinggi.
Warna dan jarak yang boleh dilaraskan sepenuhnya tanpa menulis sintaks gradien secara manual atau mengira matematik jubin.
Pratonton langsung menunjukkan corak berulang yang tepat sebelum anda menyalin apa-apa.
Berskala dengan bersih kerana ia matematik vektor, bukan imej raster — tiada kabur apabila elemen diubah saiz.
Berjalan sepenuhnya dalam pelayar anda — tiada apa yang anda konfigurasikan dimuat naik ke mana-mana.
Percuma, tiada pendaftaran, berfungsi pada mudah alih.

Cara menggunakannya

Pilih jenis corak: titik polka, jalur pepenjuru, papan dam, atau garisan grid.
Pilih warna corak dan warna latar belakang yang muncul antara/di belakang bentuk corak.
Laraskan pelungsur saiz untuk menjadikan titik, jalur atau sel grid lebih besar atau lebih kecil — ini juga mengawal betapa padat corak itu berulang.
Salin CSS yang dijana dan tampalkannya sebagai background-image (dan background-size/background-position di mana ditunjukkan) mana-mana elemen.

Contoh

Input

Corak: titik polka · Warna: biru · Latar belakang: putih · Saiz: 24px

Hasil

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Corak titik polka cerah klasik yang selalunya digunakan sebagai latar belakang bahagian halus atau tekstur kad.

Bagaimana setiap corak dibina

Titik polka: radial-gradient() melukis satu bulatan kecil yang diisi, kemudian background-size menjadikannya berulang sebagai grid titik berjubin.
Jalur pepenjuru: repeating-linear-gradient() pada sudut 45 darjah berselang-seli antara warna corak dan warna latar belakang pada selang tetap.
Papan dam: dua lapisan linear-gradient() 45 darjah yang bertindih, diimbangi antara satu sama lain sebanyak separuh jubin, menghasilkan segi empat cerah/gelap berselang-seli.
Garisan grid: dua garisan linear-gradient() nipis — satu mendatar, satu menegak — berjubin pada jarak yang dipilih untuk membentuk grid, serupa dengan kertas graf.

Bila untuk guna corak CSS berbanding fail imej

Corak gradien CSS tiada saiz fail dan tiada permintaan HTTP, jadi ia dimuatkan serta-merta dan tidak pernah kelihatan kabur pada skrin DPI tinggi, berbeza dengan jubin latar belakang PNG raster. Ia sesuai untuk tekstur halus di belakang teks, pembahagi bahagian, ilustrasi keadaan-kosong, atau kad ruang letak. Untuk corak fotografi atau berilustrasi yang kompleks, imej sebenar masih alat yang betul — gradien CSS paling sesuai untuk bentuk berulang yang mudah dan geometri seperti yang ada di sini.

Digandingkan dengan kesan CSS lain

Corak berfungsi dengan baik sebagai latar di belakang kad glassmorphism, kerana kabur memerlukan sesuatu dengan tekstur visual di belakangnya untuk kelihatan. Ia juga sepadan secara semula jadi dengan sudut bulat pada elemen bekas.

→ Penjana CSS Glassmorphism · Penjana CSS Border-Radius

Soalan lazim

Adakah corak-corak ini memerlukan sebarang fail imej?

Tidak. Setiap corak di sini dijana semata-mata dengan gradien CSS sebagai background-image — tiada PNG, SVG atau fail lain yang terlibat, jadi tiada permintaan HTTP tambahan dan tiada risiko kabur pada skrin resolusi tinggi.

Bolehkah saya ubah saiz corak?

Ya — pelungsur saiz mengawal background-size, yang menetapkan besar mana satu jubin corak berulang. Saiz lebih kecil memampatkan titik, jalur atau sel grid lebih rapat; saiz lebih besar merenggangkannya.

Kenapa corak papan dam menggunakan dua gradien?

Satu linear-gradient() hanya boleh berselang-seli warna sepanjang satu arah. Melapiskan dua gradien 45 darjah, diimbangi antara satu sama lain sebanyak separuh jubin, adalah yang menghasilkan segi empat cerah/gelap berselang-seli papan dam — ini teknik standard untuk papan dam CSS-sahaja.

Adakah corak ini kelihatan tajam pada skrin retina/DPI tinggi?

Ya. Kerana corak adalah gradien matematik berbanding imej bitmap, ia dipaparkan pada resolusi yang diperlukan oleh skrin, tanpa peningkatan skala atau kaburan — berbeza dengan jubin imej raster kecil yang diregang atau diulang pada ketumpatan piksel tinggi.

Bolehkah saya guna corak-corak ini sebagai latar belakang halaman penuh?

Ya — gunakan background-image, background-size dan background-position (di mana ada) yang dijana pada body atau mana-mana elemen bekas lebar-penuh. Ingat kontras: corak yang sibuk dan kontras tinggi di belakang teks badan boleh menjejaskan kebolehbacaan, jadi tetapan yang lebih cerah/halus biasanya berfungsi lebih baik untuk kawasan latar belakang besar.