Question

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

我已经标记了一个语言菜单，我想在每个命名语言旁边显示一个标志图标。

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

但有没有办法 - 使用CSS或 CSS自定义属性或其他一些方法 - 我可以让浏览器为每个列表项导出正确的背景图像，只使用（例如）attr()和class="fr"？

N.B。我已经为此做好了准备，超出了CSS的当前功能 - 但我很想知道是否有任何创造性的方法来解决这个问题。

＆＃13;

data-language="fr"

＆＃13;

.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');}

＆＃13;

其他信息：

我的第一种方法是不充分的，因为它不允许旗帜图标有圆角：

＆＃13;

<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>

＆＃13;

    .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');}

＆＃13;

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

Answer 1

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

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

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

（我承认，在一天结束时，这一切都不是很重要 - 它只是对优雅标记文件的持续追求。） < / p>

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

2 个答案: