CSS3サンプルの共有による複数背景の実装

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

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

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

background: [background-image] [background-origin] | [background-repeat] | [background-size] | [background-attachment] | [background-position]

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

例を見てみましょう:

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

HTML コード:

コードは次のとおりです。

< p class = "p1"
コードは次のとおりです:

.p1{

margin:50px auto;

width:700px;

height:450px;
border:10px 破線 #ff00ff;

背景画像:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);

背景-繰り返し:繰り返しなし、繰り返しなし、繰り返しなし、繰り返しなし、繰り返しなし;

背景-位置:左上、右上、左下、右下、中央中央;
}


効果は次のとおりです:

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

コードは次のとおりです: 値を書き込むだけで、効果はまったく同じです。 .p1 {

背景リピート: no-repeat;

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

...

background:url(images/1.jpg) no-repeat 上左、

url(images/2.jpg) no-repeat 右上、

url (images/3.jpg) 繰り返しなし 左下、r URL (images/4.jpg) 繰り返しなし 右下、
URL (images/5.jpg) 繰り返しなし 中央 中央。完全なソース コードと例を以下に示します。参照として使用できます。

以上がCSS3サンプルの共有による複数背景の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。