


Pelaksanaan berbilang latar belakang dengan berkongsi contoh CSS3 (Berbilang latar belakang)_CSS/HTML
Kelahiran CSS3 menyelesaikan masalah ini untuk kami Dalam CSS3, berbilang imej latar belakang boleh ditetapkan untuk bekas melalui imej latar belakang atau latar belakang, yang bermaksud imej latar belakang yang berbeza boleh diletakkan dalam satu elemen blok sahaja.
Mula-mula mari kita lihat tatabahasa:
latar belakang: [latar-gambar] |. [latar-latar belakang] | [latar-latar belakang] | 🎜>
Gunakan koma untuk memisahkan URL berbilang imej latar belakang Jika terdapat berbilang imej latar belakang dan hanya terdapat satu atribut lain (contohnya, hanya terdapat satu ulangan latar belakang), maka nilai atribut ini akan digunakan pada semua latar belakang. imej.Mari kita lihat contoh:
Di sini kita akan menggunakan 5 gambar sebagai latar belakang bekas div. Mari kita lihat kod:
Kod HTML:
margin:50px auto;
lebar:700px;
tinggi:450px;
sempadan:10px putus-putus #ff00ff;
background-image:url(images/1.jpg),url(images/2 .jpg) ,url(imej/3.jpg),url(imej/4.jpg),url(imej/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat, tiada ulang , tiada ulangan;
kedudukan latar belakang: kiri atas, kanan atas, kiri bawah, kanan bawah, tengah tengah;
}
![]() |
Sudah tentu, apabila menetapkan pelbagai atribut imej latar belakang di atas, ia ditulis secara berasingan, jadi kita juga boleh menulis pelbagai atribut imej latar belakang dalam kes ini, kod CSS adalah seperti berikut:
...
latar belakang:url(imej/1.jpg) tiada ulangan atas kiri,
url(imej/2.jpg) tiada ulangan atas kanan,
url(imej/3.jpg) tiada ulangan kiri bawah,
url(imej/4.jpg) tiada ulangan bawah kanan,
url(imej/5.jpg) pusat tengah tiada ulangan;
...
}

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.
