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コードは以下の通りです。次のセクション
