1

CSSでは、2つの背景画像を積み重ねてサイズを個別に制御する方法を見つけようとしています。したがって、CSSでは、1つの背景画像を次のように定義できますbackground:url('base.png') no-repeat center;。ベースイメージの上にオーバーレイをスタックするには、図1のようなアプローチを使用できます。

    。私のクラス {
      バックグラウンド：
        url（'overlay.png'）繰り返しなしのセンター、
        url（'base.png'）繰り返しなしのセンター;
      背景サイズ：100％100％;
    }

図1

ただし、画像ごとに少し異なるサイズが必要な場合は、その方法がわかりません。呪文は、図2のように、一種のインライン位置と寸法の定義であると想像します。しかし、私はそれを完全に正しく理解していません。誰かがこれを行う方法を知っていますか？前もって感謝します。

    。私のクラス {
      バックグラウンド：
        url（'overlay.png'）no-repeat 0 0/100％90％、
        url（'base.png'）繰り返しなしの中心0 0/100％100％;
    }

図2

4

2 に答える 2

2

私はあなたがCSSを使ってほとんどそこにいたと思います私はあなたが次のようにそれをすることができると信じています：

   .my-class {
      background:
        url('overlay.png') no-repeat center, 
        url('base.png') no-repeat center;
      background-size: 90px 80px, 100px 100px;
    }

カンマが必要なだけで、2番目の背景のサイズを設定できます。

于 2013-03-27T05:14:20.967 に答える
0

背景画像を2つの異なるものに設定してから、divsそれらをz-indexでレイヤー化する方が簡単です。

デモ：http： //jsfiddle.net/vEMs4/

HTML：

<div id="bg1"></div>
<div id="bg2"></div>

CSS：

#bg1{
    position:absolute;
    top:0px;
    left:50px;
    height:200px;
    width:250px;
    background-color:blue;
    opacity:0.3;
    z-index:2;
}
#bg2{
    top:0px;
    left:0px;
    position:absolute;
    height:250px;
    width:250px;
    background-color:green;
    opacity:0.3;
    z-index:1;
}

デモでは、画像の代わりに背景色を使用しているため、画像に合わせて適切に調整する必要があります。

于 2013-03-27T05:10:32.170 に答える