☰

:after 要素の CSS 背景画像 質問する

tag-icon • tag-icon css background
:after 要素の CSS 背景画像 質問する

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

HTML:

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

CS: ...

.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;
}

私が何を意味しているかを正確に知るには、このフィドルを確認してください。

ヒントがあればよろしくお願いします。

ベストアンサー1

いくつかのこと

(a) background-color と background の両方を設定することはできません。background が常に優先されます。以下の例では、ショートカットを使用してこれらを組み合わせましたが、これは画像が表示されない場合のフォールバック メソッドとしてのみ color を生成します。

(b) no-scroll は機能しません。これは background-image の有効なプロパティではないと思います。fixed のようなものを試してください:

.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これに画像が表示されました。

おすすめ記事