1

<img />我知道我可以使用and PHP（或就此而言）解决下面的问题javascript，但如果可以的话，我想使用 just 来解决它CSS。

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

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

但是有什么方法——使用CSS 自定义属性attr()或其他方法——我可以让浏览器为每个列表项导出正确的背景图像，只使用（例如）和？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()函数，从元素中获取属性值。

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

于 2016-07-25T13:16:15.723 回答
0

现在，我已经选择了：

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

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

于 2016-07-25T13:09:06.817 回答