tetapan latar belakang css

CSS ialah bahasa yang digunakan untuk reka bentuk web dan sering digunakan untuk mengawal gaya dan penampilan halaman web. Latar belakang adalah salah satu elemen paling asas dalam halaman web Anda boleh menetapkan latar belakang halaman web secara fleksibel melalui CSS, membawa kemungkinan tanpa had kepada reka bentuk laman web. Artikel ini akan memperkenalkan anda kepada pengetahuan asas dan penggunaan biasa tetapan latar belakang CSS.

1. Pengenalan kepada latar belakang CSS

Latar belakang CSS bukan sahaja boleh digunakan untuk menetapkan latar belakang halaman web, tetapi juga boleh digunakan untuk menetapkan latar belakang elemen, seperti DIV, BUTTON , dsb. Tetapan latar belakang CSS termasuk pelbagai atribut seperti warna, gambar, kedudukan, pengulangan, saiz, dll. Dengan menggabungkan atribut ini, anda boleh membuat halaman web pelbagai gaya.

2. Tetapan warna latar belakang CSS

Warna latar belakang ialah tetapan paling mudah dalam CSS dan boleh ditetapkan melalui atribut warna latar belakang. Contohnya, untuk menetapkan warna latar belakang halaman web kepada putih, anda boleh menambah kod berikut pada helaian gaya:

badan {
warna latar belakang: #ffffff;
}

di mana, #ffffff ialah perwakilan heksadesimal bagi putih. Selain perenambelasan, RGB, RGBA dan HSL juga boleh digunakan untuk menyatakan warna.

3. Tetapan imej latar belakang CSS

Imej latar belakang ialah tetapan latar belakang yang paling biasa digunakan dalam CSS dan boleh ditetapkan melalui atribut imej latar belakang. Contohnya, untuk menetapkan latar belakang halaman web kepada imej, anda boleh menambah kod berikut pada helaian gaya anda:

body {
background-image: url('example.jpg');
}

Antaranya, url('example.jpg') mewakili laluan imej yang akan ditetapkan. Apabila menetapkan imej latar belakang, anda perlu memberi perhatian kepada saiz dan format fail imej latar belakang Sebaik-baiknya memilih imej dengan saiz yang sesuai dan pemampatan tanpa kerugian.

4. Tetapan kedudukan latar belakang CSS

Kedudukan latar belakang merujuk kepada kedudukan imej latar belakang dalam elemen. Ia boleh ditetapkan melalui sifat kedudukan latar belakang. Sebagai contoh, letakkan imej di tengah-tengah latar belakang halaman web:

body {
background-image: url('example.jpg');
background-position: center;
}

Cara yang lebih umum ialah menggunakan nilai koordinat Contohnya, kod berikut meletakkan imej di tengah atas latar belakang halaman web:

badan {
latar belakang-. imej: url('example.jpg' );
kedudukan latar belakang: tengah atas;
}

5. Tetapan ulangan latar belakang CSS

Apabila saiz imej lebih kecil daripada saiz elemen, anda perlu menggunakan tetapan ulangan latar belakang CSS untuk mengisi keseluruhan elemen. Boleh ditetapkan melalui atribut ulangan latar belakang. Contohnya, berjubin secara mendatar dan menegak:

body {
background-image: url('example.jpg');
background-repeat: repeat;
}

Anda juga boleh menetapkannya supaya hanya mengulang dalam arah mendatar atau menegak, atau tidak mengulangi.

6. Tetapan saiz latar belakang CSS

Atribut saiz latar belakang adalah baharu dalam CSS3, yang boleh digunakan untuk menetapkan kaedah penskalaan imej latar belakang. Contohnya, untuk menskalakan imej latar belakang kepada lebar 100%:

body {
background-image: url('example.jpg');
background-size: 100% auto;
}

juga boleh digunakan untuk menetapkan nilai lebar dan ketinggian tertentu, atau melaksanakan kaedah penskalaan yang berbeza melalui kata kunci seperti penutup dan kandungan.

7. Tetapan ketelusan latar belakang CSS

Ketelusan latar belakang boleh ditetapkan melalui perwakilan warna rgba, di mana nilai alfa digunakan untuk mewakili tahap ketelusan, dengan julat nilai 0-1. Contohnya, tetapkan ketelusan latar belakang halaman web kepada 50%:

body {
background-color: rgba(255, 255, 255, 0.5);
}

Dalam aplikasi sebenar, anda boleh menggunakan sifat CSS lain dalam kombinasi, seperti bayangan kotak, kecerunan linear, dsb., untuk menjadikan latar belakang halaman web lebih jelas dan terang.

8. Ringkasan

Tetapan latar belakang CSS merupakan bahagian penting dalam reka bentuk web Melalui gabungan warna latar belakang, gambar, kedudukan, pengulangan, saiz dan atribut lain yang fleksibel, ia boleh digunakan untuk. reka bentuk web. Gaya yang membawa pelbagai gaya. Artikel ini memperkenalkan pengetahuan asas dan penggunaan biasa tetapan latar belakang CSS untuk membantu pembaca menguasai dan menggunakan teknologi CSS dengan lebih baik.

Atas ialah kandungan terperinci tetapan latar belakang css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!