複数の背景複数の背景

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

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

まず、構文を見てみましょう:

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

複数の背景画像があり、他の属性が 1 つだけある場合 (たとえば、background-repeat が 1 つだけある場合)、カンマを使用して、複数の背景画像の URL を区切ります。すべての背景画像にこのプロパティ値が適用されます。

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

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;

注:

背景の各セットの略語値を区切るにはカンマを使用します

サイズ値がある場合は、それが必要です。

複数の背景画像があり、他の属性が 1 つだけある場合 (たとえば、background-repeat が 1 つだけある場合)、すべての背景画像がこれを適用することを意味します。属性値。

背景色は 1 つだけ設定できます。

例を見てみましょう:

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

HTML コード:

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

実際、前述したように、「背景画像が複数あり、他の属性が 1 つだけある場合 (たとえば、背景-繰り返し)、すべての背景画像にこの属性値が適用されます。「したがって、次のように簡略化できます。

background-repeat:no-repeat;

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

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