2

これが私が使おうとしているHTMLです：

<h1>Order Not Paid<span class="not-paid"></span></h1>

もちろん、もっと良い方法があればそう言ってください。

現在、スパン内にテキストがないため、ブラウザはこのタグを無視しているようです。検査時にFirebugがグレー表示されます。

スパンにテキストを配置すると、アイコンが正しく表示されます。

この効果にはどのCSSルールを適用できますか？これが私がこれまでに持っているものです（これはSASSですが、理解しやすいです）：

h1 {
    font-size: 24px;

    span.not-paid {
        background-image: url('/Public/images/remove.png');
        background-repeat: no-repeat;
    }
}

スパンがある場所にアイコンを表示したいのですが。

あるいは、このようなことをするのはコーシャですか？もしそうなら、IE8と最新のブラウザで見栄えがするので、これで解決できます。

<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>
4

4 に答える 4

7

アイコンが小さく、他の場所で再利用されていない場合は、h1の一部として設定してください。

HTML：

<h1 class="not-paid">Order Not Paid</h1>

CSS：

h1.not-paid {
  font-size: 24px;
  padding:0 16px 0 0; /* whatever the dimensions the image needs */
  background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}

このように少しきれい。

于 2012-04-06T23:58:43.907 に答える
2

スパンに幅がないため、背景画像が表示されていないため、背景が表示されていません。

また、指定したスニペットは有効なcssではありません。

画像が16pxx16pxであると仮定して、次のようなものを試してください。

h1 {
  font-size: 24px;
}

span.not-paid {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}

display: inline-block;幅が適用されるようにすることです。画像を線のvertical-align中央に配置します。

そうは言っても、<img>タグソリューションも機能しますが、多くの同様の画像にうまく対応できません。cssベースのソリューションを使用すると、後でcssスピリットのようなものに簡単に切り替えることができます。

いずれの場合も、このページが本番環境で機能することを期待する前に、直接画像のURLを相対URLに変更することをお勧めします。

于 2012-04-06T23:45:45.577 に答える
0

私はあなたがスパンにいくらかを与える必要があるとかなり確信していますwidth。デフォルトでは何もありませんので、もちろん背景画像は表示されません。

于 2012-04-06T23:38:23.580 に答える
0

まず、sass以下を使用していない場合は、スタイルシートが間違っています。次に、inner-blockスパンと画像の高さと幅を指定します。

h1 {
    font- size: 24px;
}

h1 span.not-paid {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}
于 2012-04-06T23:51:29.730 に答える