0

私はメニューリストを持っています：

<ul>
  <li class="marked">First item</li>
  <li>Second much longer than first item</li>
</ul>

widthテキスト幅の 100% になるitem.marked の上に画像マーカーを配置したいと思います。画像が完全に見えるように、画像を引き伸ばす必要があります。Height一定です。

CSSこれは、IE互換性で実行できますか?

4

2 に答える 2

1 
 <style type="text/css">
    .selected {
       background:url("example.png") no-repeat 0 100%;
    }
 </style>
于 2012-08-18T11:39:37.637 に答える
0

リストアイテムの背景を変更するためのソリューション（画像を変更するように適合させることができます）：

1. CSSのみ、永続的、現在のバージョンのブラウザーで機能します（IE8以前では機能しません）-デモ。

HTML：

<ul>
    <li>
        <input type="radio" name="s" id="o1" checked>
        <label for="o1">First item</label>
    </li>
    <li>
        <input type="radio" name="s" id="o2">
        <label for="o2">Second much longer than first item</label>
    </li>
</ul>

関連するCSS：

ul input[type=radio] {
    display: none;
}
input[type=radio]:checked + label {
    background: lightblue;
}

選択したアイテムの上に（imgタグ付きの）画像を表示したい場合は、このデモのように調整できます。

HTML：

<ul>
    <li>
        <input type="radio" name="s" id="o1" checked>
        <label for="o1">First item
            <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
        </label>
    </li>
    <li>
        <input type="radio" name="s" id="o2">
        <label for="o2">Second much longer than first item
            <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
        </label>
    </li>
</ul>

そして、次のCSSを追加します。

label img {
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
input[type=radio]:checked + label img {
    display: block;
}

imgタグを使用したくない場合は、このデモのようにbackground-image、疑似要素でaを使用し、をに設定background-sizeできます。HTMLは最初のデモと同じであり、CSSにもこれを含める必要があります。100% 100%

label {
    position: relative;
}
input[type=radio]:checked + label:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background: url(http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg);
    background-size: 100% 100%;
    content: '';
}

2. CSSのみで、永続的ではありません（ページの他の場所をクリックしてもリスト項目は選択されたままになりません）、IE8（およびIE7でも機能しますが、変更を表示するにはテキストにカーソルを合わせる必要があります）-デモ。

HTML：

<ul>
    <li><a href="#" tabindex="1">First item</a></li>
    <li><a href="#" tabindex="1">Second much longer than first item</a></li>
</ul>

関連するCSS：

a:active, a:focus {
    outline: none;
    background: lightblue;
}
于 2012-08-18T11:56:22.713 に答える