php - 如何使用 DATA ATTRIBUTE 将背景图像添加到带有 HTML 和 CSS 的 anchor 标记

Question

当值为“ENGLISH”和“FRENCH”时，我正在尝试向 anchor 标记添加背景图像

当回显的 php 值是一个数字时，我能够以这种方式使用 DATA-ID 使其工作

HTML 和 PHP:

<li><a href="#" class="pjMbSelectorLocale" data-id="<?php echo 
$locale['id'];?>"><?php echo pjSanitize::html($locale['title']); ?></a></li>

CSS:

li a[data-id="1"]{
background- 
image:url("img/flags/united- 
kingdom.svg");
background-position: center;background-repeat: no-repeat;display: inline- 
block;
}
  
li a[data-id="2"]{
background-image:url("img/flags/france.svg");
background-position: center;background-repeat: no-repeat;display: inline- 
block;
}

现在，当回显值不是 ID(1 或 2)而是文本(“英语”和“法语”)时，我尝试使用以下语句执行相同的操作:

<button>
  <a href="#" data-value="<?php echo $selected_lang;?>"></a>
</button>

而且我似乎无法弄清楚如何在 css 中操作它

更新:php 似乎有问题，每当我添加 anchor 标记时，回显文本就会消失:初始 php 是:

<button>
<?php echo $selected_lang;?>
</button>

使用开发工具，我可以看到值被传递到数据值中，并且 css 与任一选项一起使用。但浏览器既不呈现文本也不呈现图像

---

已解决

解决方法:

图像被 background-image:none 默认属性隐藏，我还必须应用高度和宽度。

a[data-value="English"]{
background- 
image:url("img/flags/united- 
kingdom.svg");
background-position: center;background-repeat: no-repeat;display:inline- 
block;width: 20px;height: 20px;
}

Answer 1

你试过吗:

li a[data-value='ENGLISH']{
    ...
}
li a[data-value='FRENCH']{
    ...
}