css - background-image の周囲の余白

Question

背景画像の周りに空白が表示されます。

ここに画像の説明を入力

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

.class-of-div{

background: #00b5ff url(../img/cart.png) no-repeat;

background-position: 34px 4px;
}

これはすべてのブラウザで発生します

score 5 · Accepted Answer

クラスをイメージに保持していた場合は、次のコードを試してください。

.class-of-div {
    background: #00b5ff url(../img/cart.png) no-repeat;
    background-position: 34px 4px;
    margin: -8px 0 0 -6px;
}

または単に以下のコードを使用します。

body {
    margin: 0px;
}

上記より非常に簡単です。

score 4 · Accepted Answer

Photoshop の「Web 用に保存」を使用しないでください。代わりに「名前を付けて保存」を使用してください。:)

score 2 · Accepted Answer

2

画像がない場合は、背景画像の幅を 100% に設定します。

background-size:100%;

于 2013-08-07T06:26:27.150 に答える

score 2 · Accepted Answer

2

これをcssに追加します

*{padding:0px;
margin:0px;}

于 2013-08-07T06:42:01.120 に答える

score 0 · Accepted Answer

display: inline-block; を設定してみてください。または表示: ブロック; あなたのイメージに。css3 が使える場合は、または同様に使用background-size: cover;できます。background-position: top left;

score 0 · Accepted Answer

回答ありがとうございます。それはグラフィックの問題でした.Photoshopの「Web用に保存」が実際にそのスペースを作成していました（理由はわかりません）。しかし、一度「名前を付けて保存」からファイルを保存しました。それはうまくいっています。

score 0 · Accepted Answer

イメージの問題。その他をダウンロードまたは作成します。CSSの問題ではありません。

score 0 · Accepted Answer

問題の私の理解によると、私はあなたの問題を解決するためにフィドルを作成しました。ここでフィドルを見つけてください

div の周りに境界線を追加し、高さを設定して、画像の周りに空白がないことを明確にしました。

.class-of-div{
    background: #00b5ff url('http://instafynd.com/problem.PNG') no-repeat 34px 4px;

    height: 200px;
    border:1px solid #f00;
}

問題が解決するかどうかお知らせください。

12 に答える 12