Semua orang harus biasa dengan imej latar belakang atribut latar belakang Dalam CSS2, atribut berkaitannya termasuk ulangan latar belakang (menetapkan sama ada latar belakang diulang dan cara mengulanginya), kedudukan latar belakang (menetapkan imej latar belakang dalam bekas. )), lampiran latar belakang (menetapkan sama ada tatal latar belakang dengan halaman), gunakan sifat ini untuk mengawal cara imej latar belakang dipaparkan dalam bekas, tetapi kami hanya boleh menyediakan satu imej latar belakang untuk bekas Latar belakang dilaksanakan dengan berbilang gambar, jadi bagaimana kita melakukannya? Tambah beberapa elemen yang tidak berguna ke dalam bekas?
Kelahiran CSS3 telah 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 hanya dalam satu di dalam. elemen blok.
Mula-mula mari kita lihat sintaks:
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
Gunakan koma untuk memisahkan URL berbilang imej latar belakang Jika terdapat berbilang imej latar belakang, tetapi hanya satu atribut lain (contohnya Ada hanya satu ulangan latar belakang), maka nilai atribut ini digunakan pada semua imej latar belakang.
Singkatan di atas boleh dipecahkan kepada bentuk berikut:
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
Nota:
Asingkan nilai singkatan setiap kumpulan latar belakang dengan koma; >
Jika terdapat nilai saiz, ia perlu diikuti dengan kedudukan dan dipisahkan dengan "/"; tetapi hanya terdapat satu atribut lain ( Contohnya, hanya terdapat satu ulangan latar belakang), menunjukkan bahawa nilai atribut ini digunakan untuk semua imej latar belakang.
warna latar belakang hanya boleh ditetapkan kepada satu.
Mari kita lihat contoh:
Di sini kita ingin menggunakan 5 gambar sebagai latar belakang bekas div Mari kita lihat kod:
Kod HTML:
<div class="div1">
<a href="http://ask.php.cn/" title="BeyondWeb-分享知识，分享快乐">php中文网</a> </div>
Kod CSS:
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(http://www.jnnews.tv/_CMS_NEWS_IMG_/www2/2011-04/20/sy/cms_9266e59e30584f02b09200b15f96a29f_0364_10_49_34.jpg),url(http://image27.360doc.com/DownloadImg/2011/04/2513/11209781_14.jpg),url(http://s6.sinaimg.cn/bmiddle/4efc7f58ge08613748ce6&690),url(http://imgsrc.baidu.com/forum/w%3D580/sign=79520e92632762d0803ea4b790ed0849/8a6104a4462309f740ec1ca3720e0cf3d6cad6a8.jpg),url(http://img1.3lian.com/2015/w7/85/d/101.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}Dalam kod di atas, terdapat ayat ini:
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
Malah, ia boleh dipermudahkan, kerana ia mempunyai telah disebut sebelum ini bahawa "jika terdapat Terdapat berbilang imej latar belakang, tetapi hanya terdapat satu atribut lain (sebagai contoh, hanya terdapat satu ulangan latar belakang), maka nilai atribut ini digunakan pada semua imej latar belakang. "Jadi ia boleh dipermudahkan kepada:
background-repeat:no-repeat;
Hanya tulis nilai, dan kesannya adalah 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 bersama-sama Kod CSS pada masa ini adalah seperti berikut:
.div1{
background:url(http://www.jnnews.tv/_CMS_NEWS_IMG_/www2/2011-04/20/sy/cms_9266e59e30584f02b09200b15f96a29f_0364_10_49_34.jpg) no-repeat top left,
url(http://image27.360doc.com/DownloadImg/2011/04/2513/11209781_14.jpg) no-repeat top right,
url(http://s6.sinaimg.cn/bmiddle/4efc7f58ge08613748ce6&690) no-repeat bottom left,
url(http://imgsrc.baidu.com/forum/w%3D580/sign=79520e92632762d0803ea4b790ed0849/8a6104a4462309f740ec1ca3720e0cf3d6cad6a8.jpg) no-repeat bottom right,
url(http://img1.3lian.com/2015/w7/85/d/101.jpg) no-repeat center center;
}bahagian seterusnya