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

Question

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

我已经标记了一个语言菜单，我希望在每个命名的语言旁边都出现一个标志图标。

理想情况下，每次添加新语言时，我都不想在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

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

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

Answer 2

目前，我选择了：

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中解决这个问题的话。

（我承认，归根结底，这些都不重要——这只是对标记优雅的文件的持续追求）