29

CSSボタンを作成し、：afterを使用してアイコンを追加しようとしていますが、画像が表示されません。'background'プロパティを'background-color：red'に置き換えると、赤いボックスが表示されるため、ここで何が問題になっているのかわかりません。

HTML：

<a class="button green"> Click me </a>

CSS：

.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}

.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}

.green {
background-color: #8ce267;
}

このフィドルをチェックして、私が正確に何を意味するかを確認できます。

ヒントをありがとう。

4

2 に答える 2

57

いくつかのこと

(a) background-color と background の両方を持つことはできません。background が常に優先されます。以下の例では、省略形でそれらを組み合わせていますが、これは画像が表示されない場合のフォールバック方法としてのみ色を生成します。

(b) no-scroll が機能しません。背景画像の有効なプロパティではないと思います。固定のようなものを試してください:

.button:after {
    content: "";
    width: 30px;
    height: 30px;
    background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

jsFiddleをこれに更新すると、画像が表示されました。

于 2013-02-04T20:50:31.573 に答える
6

AlienWebGuyが言ったように、background-imageを使用できます。背景を使用することをお勧めしますが、URLの後にさらに3つのプロパティが必要になります。

background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;

説明：2つのゼロは、画像のxとyの位置です。背景画像が表示される場所を調整する場合は、これらを試してみてください（正の値と負の値の両方を使用できます（例：1pxまたは-1px））。

No-repeatは、画像が背景全体に繰り返されないようにすることを意味します。これは、repeat-xおよびrepeat-yにすることもできます。

于 2013-02-04T20:55:35.720 に答える