html - CSSスプライト-要素の一部の背景として画像の一部のみを使用

Question

私はCSSスプライトテクニックを次のような背景画像で使用しています。

アイコンのCSSコード：

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

私のアイコンは次のように使用できます。

<div class="icon warning"></div>

アイコンの中に次のようなテキストを入れたいです。

<div class="icon warning">There is a warning on this page</div>

ただし、問題は、背景画像がテキスト領域全体をカバーしていることです。

問題は、画像の一部のみを要素の一部の背景画像として使用するにはどうすればよいですか？

ノート：

• forに設定widthしても効果はありません。16pxdiv.icon

Answer 1

可能な限り、デザインを実現するためだけにマークアップを変更しないでください。マークアップを使用することが可能です。

div.icon:before {
    content: "";
    background-color: transparent;
    background-image: url("/images/icons.png");
    display: inline-block;
    height: 16px;
    vertical-align: text-top;
    width: 16px;
}

div.icon:not(:empty):before {
    margin-right: 4px;
}

div.icon.attenuation {
    background-position: 0 0;
}

Answer 2

2つの方法があります。

1）マークアップは次のようにする必要があります：

<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}

2）画像を変更する必要があります。画像内のアイコンは別のアイコンの下にある必要があります

Answer 3

申し訳ありませんが、私の前の答えはうまくいきませんでした。

編集：16ピクセルのパディングがある場合は、幅を16ピクセルではなく0に設定する必要があります。そして:not(:empty)、すべてのブラウザでビットを動作させるのに問題があります。それを取り除く方が良い。したがって、CSSは次のようになります。

.icon {
  ...
  width:0; height:16px; padding-left:16px;
}
.icon:empty {
  width:16px; padding-left:0;
}

jsFiddle

Answer 4

設定width: 16px; height: 16px; overflow: hidden; text-indent: -9999em;および削除padding