html - PNGファイルの一部からの背景画像

Question

私はこのイメージを持っています:

.png ファイルの一部を画像として使用するにはどうすればよいですか? 上部を自分のクラス<a class="non_check">に、下部を背景として使用したいと考えています。<a class="checked">

Answer 1

CSS 画像スプライトを使用したいと思うでしょう。画像スプライトを使用すると、画像の使用したい部分だけを表示できます。

例えば：

a.checked {
    width: 20px;
    height: 20px;
    display: block;
    background:url('image_here.png') 0px -20px;
}

a.unchecked {
    width: 20px;
    height: 20px;
    display: block;
    background:url('image_here.png') 0px 0px;
}

• プロパティは、divのbackground背景となる画像を定義します。
• 画像リンクに続く番号は位置を定義します (最初の番号はleftで、2 番目の番号は ですtop)。

JS フィドルの例

CSS スプライト: その概要、クールな理由、および使用方法

Answer 2

画像の半分の高さのレイヤー (DIV や SPAN など) が必要です。画像を背景に配置し、background-position を設定することで、画像部分をビューに移動したり、ビューの外に移動したりできます。

Answer 3

適切な CSS を使用する必要があります。次のように、固定プロパティwidthと固定プロパティを組み合わせることができます。heightbackgroundbackground-position

.checkbox
{
    width: 23px;
    height: 42px;

    background: url(checkbox-icons.png);
}

.checkbox.unchecked
{
    background-position: 0 0;
}

.checkbox.checked
{
    background-position: 0 -21px;
}

固定サイズでは、背景の目的の長方形のみが表示され、background-positionプロパティを変更することで、どのフラグメントにするかを正確に定義できます。

Answer 4

これには、:hover で background-position を使用します。このようなもの：

.checkbox {
background:#ffffff url('checkbox.png') no-repeat 0 0;}
width:23px
height:21px;
}

.checkbox:hover {
background:#ffffff url('checkbox.png') no-repeat 0 21px;}
width:23px
height:21px;
}