Rumah hujung hadapan web tutorial css Pelaksanaan berbilang latar belakang dengan berkongsi contoh CSS3 (Berbilang latar belakang)_CSS/HTML

Pelaksanaan berbilang latar belakang dengan berkongsi contoh CSS3 (Berbilang latar belakang)_CSS/HTML

May 16, 2016 pm 12:03 PM
css3

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:

Salin kod Kod adalah seperti berikut:
<div class="div1"> ;
<a href="#" title="Script House">Script House</a>
</div>

Kod CSS:

Salin kod Kod adalah seperti berikut:
.div1{
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;
}

Kesannya adalah seperti berikut:

Pelaksanaan berbilang latar belakang dengan berkongsi contoh CSS3 (Berbilang latar belakang)_CSS/HTML
Dalam kod di atas terdapat ayat ini:

Salin kod Kod adalah seperti berikut:
background-repeat:no-repeat;

Tulis nilai sahaja, kesannya betul-betul sama.

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:

Salin kod Kod adalah seperti berikut:
.div1{
...
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;
...
}

Oh, begitulah cara berbilang latar belakang CSS3 berfungsi. Kod sumber lengkap dan contoh disediakan di bawah, yang boleh digunakan sebagai rujukan.

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang

Bagaimana untuk melaksanakan sempadan renda dalam css3 Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Bagaimana untuk melaksanakan sempadan renda dalam css3

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!

css3 apakah itu susun atur penyesuaian css3 apakah itu susun atur penyesuaian Jun 02, 2022 pm 12:05 PM

css3 apakah itu susun atur penyesuaian

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3

Adakah kesan animasi css3 mempunyai ubah bentuk? Adakah kesan animasi css3 mempunyai ubah bentuk? Apr 28, 2022 pm 02:20 PM

Adakah kesan animasi css3 mempunyai ubah bentuk?

See all articles