berbilang latar belakangBerbilang latar belakang

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.

Di sini kita ingin menggunakan 5 gambar sebagai latar belakang bekas div Mari kita lihat kod:

<div class="div1">
    <a href="http://ask.php.cn/" title="BeyondWeb-分享知识，分享快乐">php中文网</a> </div>

.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;
    
}

background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;

background-repeat:no-repeat;

.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; 
}