1

以下の問題は and を使用<img />してPHP(またはjavascriptそれについても) 解決できることはわかっていますが、可能であれば だけを使用して解決したいと考えていCSSます。

言語メニューをマークアップしました。このメニューでは、各名前付き言語の横にフラグ アイコンを表示したいと考えています。

理想的には、新しい言語を追加するたびに、CSS に新しい行を追加する必要がないようにしたいと考えています。

しかし、attr()またはCSSカスタムプロパティまたはその他の方法を使用して、(eg)class="fr"とだけを使用してブラウザに各リスト項目の正しい背景画像を導出させる方法はありdata-language="fr"ますか?

注意: これが CSS の現在の機能を超えることに対しては十分に準備ができていますが、これにアプローチする独創的な方法があるかどうかを知りたいと思っています。

.language li {line-height: 40px;}
.language li::before {content:''; display:inline-block; position:relative; width:27px; height:27px; margin-right:9px; vertical-align:middle; background-color: rgb(191,191,191); border-radius:3px;}
.language li.de::before {background-image: url('/flags/de.png');}
.language li.en::before {background-image: url('/flags/en.png');}
.language li.es::before {background-image: url('/flags/es.png');}
.language li.fr::before {background-image: url('/flags/fr.png');}
<div class="language">
<h2>Select Language:</h2>
<ul>
<li class="en" data-language="en">English</li>
<li class="de" data-language="de">Deutsch</li>
<li class="es" data-language="es">Español</li>
<li class="fr" data-language="fr">Français</li>
</ul>
</div>

追加情報：

私の最初のアプローチは、フラグ アイコンの角を丸くすることができなかったため、不適切でした。

    .language li {
    background-position:0 center;
    background-size: 27px 27px;
    background-repeat: no-repeat;
    padding-left:36px;
    }
    
    .language li.de {background-image: url('/flags/de.png');}
    .language li.en {background-image: url('/flags/en.png');}
    .language li.es {background-image: url('/flags/es.png');}
    .language li.fr {background-image: url('/flags/fr.png');}
<div class="language">
<h2>Select Language:</h2>
<ul>
<li class="en" data-language="en">English</li>
<li class="de" data-language="de">Deutsch</li>
<li class="es" data-language="es">Español</li>
<li class="fr" data-language="fr">Français</li>
</ul>
</div>

しかし、私が目指していることを達成する可能性がここにある場合は、丸みを帯びたコーナーを飛ばして喜んでいます.

4

2 に答える 2

1

現在のところ、Javascript やその他のプログラミング言語がないとできません。attr()将来的には、関数を使用して要素から属性値を取得できるようになることを願っています。

を使用するpseudo-elementと、元の要素から属性が取得されます。そのbackground-image: attr('data-bg' 'url')ため、属性を取得しdata-bgて URL として扱うことができます。

于 2016-07-25T13:16:15.723 に答える