CSSでマルチバックグラウンドブロックを使用する方法を教えてください

2年 ago
海斗, 葵
1 minute

CSSの多重背景を可能にするbackgroundプロパティの活用方法

  1. 使用background属性设置多个背景数据块。每个背景数据块之间使用逗号（,）进行分隔。
  2. １つの背景データブロックは背景画像（background-image）、背景色（background-color）、背景位置（background-position）、背景繰り返し（background-repeat）、背景サイズ（background-size）など、複数のプロパティによって構成されています。
  3. 背景データブロックの順番によって、重ね合わせたときの表示順が決まります。後のデータブロックは前のデータブロックの上に重ねられます。

以下コードの例では、CSS 複数の背景のブロックデータを使用する方法を示しています。

div {
background: url(image1.jpg) no-repeat top left, url(image2.jpg) repeat-x bottom right, linear-gradient(red, blue);
background-color: yellow;
background-size: 100%, auto;
background-position: center, right center, left top;
}

上記の例では、div要素の背景は3つのデータ塊で構成されます。左上の背景画像はimage1.jpgであり、繰り返しは行いません。もう1つの背景画像はimage2.jpgであり、水平に繰り返し、右下隅に配置されています。最後のデータ塊は、線形グラデーションの背景です（赤から青へ）。背景色は黄色であり、背景サイズは幅100%で自動の高さです。背景の位置は中央に右寄せで、左上隅に設定されています。

このようにして、複雑な多重背景効果を実現できます。

bannerAds