根据上下文使用 CSS 显示不同的背景图像（无需明确声明每个单独的背景图像）

Question

我知道我可以使用 <img /> 和 PHP（或 javascript 来解决下面的问题），但我只想使用 [=18] 来解决它=], 如果可以的话。

我已经标记了一个语言菜单，我希望在其中每个命名语言旁边出现一个旗帜图标。

理想情况下，我希望每次添加新语言时都不必向 CSS 添加新行。

但是有什么方法 - 使用 attr() 或 CSS 自定义属性 或其他方法 - 我可以让浏览器派生出正确的背景-每个列表项的图像，仅使用（例如）class="fr" 和 data-language="fr"?

N.B. 我已经做好了超越 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>

但如果这里有任何可能实现我的目标，我很乐意跳过圆角。

Answer 1

目前，我选择了：

CSS:

.language li img {
position:relative;
display:inline-block;
width:27px;
height:27px;
margin-right:9px;
vertical-align:middle;
border-radius:3px;
}

PHP:

<?php

for ($i = 0; $i < count($Language_Key); $i++) {

echo '
<li class="'.$Language_Key[$i].'">
<a href="/'.$Language_Page[$i].'/">
<img data-language="'.$Language_Key[$i].'" src="/flags/'.$Language_Key[$i].'.png" title="'.$Language_Name[$i].'" alt="Language Flag ('.$Language_Name[$i].')" />'.$Language_Name[$i].'
</a>
</li>
';

}

?>

但我仍然很想听到任何创新的非预处理器方法，是否应该有一种聪明的方法来在本机中解决这个问题CSS。

（我承认，归根结底，none 这件事非常重要 - 这只是对优雅标记文档的持续追求）。

Answer 2

目前，没有 Javascript 或任何其他编程语言是不可能的。希望将来我们能够通过使用attr() function，从元素中获取属性值。

当使用 pseudo-element 时，它从原始元素获取属性。因此，您可以执行 background-image: attr('data-bg' 'url') 来获取 data-bg 属性并将其视为 URL.

根据上下文使用 CSS 显示不同的背景图像（无需明确声明每个单独的背景图像）

Using CSS to display different background images, according to context (without explicitly declaring each individual background image)

html

css

css-variables