1

背景色の上に背景画像を設定する際に問題があります:ここに私の例を示します。

これが機能的な CSS 部分です。

#tancan{
    background-color: #ebebeb;
    background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
}

JSFiddle でわかるように、背景画像が繰り返されます。プロパティとして no-repeat を使用すると、画像が消えます。

また、背景画像を右にフロートさせたいのですが、画像を含んでいる div よりも大きくする必要があります。比例してフィットさせるにはどうすればよいですか? - と を使用してイメージ タグ<img/>を適合さwidth: 100%せheight: 100%ますか?

HTML イメージ タグは使いたくないのですが、使いたくない理由がいくつかあります。

4

3 に答える 3

6

これを試してください - http://jsfiddle.net/vmvXA/17/

#tancan {
    background: #ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat top right;
}

背景画像が親コンテナを超えないようにするには、 http://jsfiddle.net/vmvXA/22/ を使用background-size: containできます

于 2012-08-10T19:58:20.127 に答える
2

は画像自体のみを参照する特定のプロパティであるため、に追加no-repeatすることはできません。すべてを1つの宣言に追加する場合は、次のように設定します。background-imagebackground-imagebackground

background: url('http://lamininbeauty.co.za/images/products/tancan2.jpg') #ebebeb no-repeat top right;

または、すべてを別々に保つか、あなた次第です。

background-color: #ebebeb;
background-image: url('http://lamininbeauty.co.za/images/products/tancan2.jpg');
background-repeat: no-repeat;
background-position:top right;
background-size: contain;
于 2012-08-10T20:02:34.397 に答える
2

これがフィドルです。

    background:#ebebeb url('http://lamininbeauty.co.za/images/products/tancan2.jpg') no-repeat right top;

コードを短くするために、1つのプロパティですべての設定を指定することができます。これは「省略形プロパティ」と呼ばれます。

すべての画像をその親の中に収めるには、styleプロパティを追加しますbackground-size:contain;。

フィドルを更新しました。

于 2012-08-10T20:02:45.503 に答える