CSS2 の背景屬性、background-image については、誰(shuí)でもよく知っているはずです。CSS2 では、それに関連する屬性として、background-repeat (背景を繰り返すかどうか、および繰り返す方法を設(shè)定する)、background-position (背景畫像の位置を設(shè)定する) が含まれます。 Container) )、background-attachment (背景がページとともにスクロールするかどうかの設(shè)定)、これらのプロパティを使用して、コンテナー內(nèi)での背景畫像の表示方法を制御しますが、背景が必要な場(chǎng)合、コンテナーに提供できる背景畫像は 1 つだけです。コンテナの複數(shù)の畫像が実裝されているのですが、どうすればよいでしょうか？コンテナに無(wú)駄な要素を追加しますか?

CSS3 の誕生により、この問題は解決されました。CSS3 では、background-image または background を通じてコン??テナーに複數(shù)の背景畫像を設(shè)定できます。つまり、異なる背景畫像を 1 つのブロック要素にのみ配置できます。

まず、構(gòu)文を見てみましょう:

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

複數(shù)の背景畫像があり、他の屬性が 1 つだけある場(chǎng)合 (たとえば、background-repeat が 1 つだけある場(chǎng)合)、カンマを使用して、複數(shù)の背景畫像の URL を區(qū)切ります。すべての背景畫像にこのプロパティ値が適用されます。

上記の略語(yǔ)は次の形式に分解できます:

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;

注:

背景の各セットの略語(yǔ)値を區(qū)切るにはカンマを使用します

サイズ値がある場(chǎng)合は、それが必要です。

複數(shù)の背景畫像があり、他の屬性が 1 つだけある場(chǎng)合 (たとえば、background-repeat が 1 つだけある場(chǎng)合)、すべての背景畫像がこれを適用することを意味します。屬性値。

背景色は 1 つだけ設(shè)定できます。

例を見てみましょう:

ここでは、div コンテナの背景として 5 つの寫真を使用したいと考えています。コードを見てみましょう:

HTML コード:

<div class="div1">
    <a href="http://ask.php.cn/" title="BeyondWeb-分享知識(shí)，分享快樂">php中文網(wǎng)</a> </div>

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

上記のコードには次の文があります:

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

実際、前述したように、「背景畫像が複數(shù)あり、他の屬性が 1 つだけある場(chǎng)合 (たとえば、背景-繰り返し)、すべての背景畫像にこの屬性値が適用されます?！袱筏郡盲啤⒋韦韦瑜Δ撕?jiǎn)略化できます。

background-repeat:no-repeat;

値を書き込むだけで、効果はまったく同じになります。

もちろん、上記の背景畫像の各種屬性を設(shè)定する際は別々に記述するので、背景畫像の各種屬性をまとめて記述することもできます。 この時(shí)のCSSコードは以下の通りです。