0

答えをオンラインで探しましたが、2 つの画像を追加して同じ css 要素で配置する方法が見つかりません。

私のコードは次のようになります

div.coupon {
  background-image: url(slice.png), url(notice.png);
  background-position: center, right bottom; 
}

(slice.png) だけで動作させることができますが、(notice.png) を追加しようとすると、両方の画像が消去されます。誰にもアイデアがありますか？

4

1 に答える 1

0

非常に簡単ではありません (とにかくクロスブラウザーのサポートのため)...いくつかのトリックで創造的になる必要があります...

この方法では、各画像などに css3 アニメーションを使用して、よりクリエイティブにすることもできます。

開始するための非常に簡単な回避策の例を次に示します: http://jsfiddle.net/XGrzZ/

HTML:

<div class="background-1">
    <div class="background-2"></div>
</div>

CSS:

.background-1 {
    position: relative;
    width:100%;
    height:400px;
    background:rgba(34,35,55,0.1); //replace with image
}
.background-2 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(90,39,68, 0.3); // replace with image
}
于 2013-11-12T02:00:04.353 に答える