CSS使用标题文本来获取背景图像网址

Question

我目前有一点问题，但我认为仅使用css3是不可能的，我想从title属性中获取图像名称并在background-image网址上使用它，如下所示：

#wizHeader li a[title^="step_"]{
    background-image: url("../images/" + attr(title) + ".png");
}

这只能用css3吗？

Answer 1

目前不可能。 CSS中的attr函数具有很大的潜力，但据我所知，至少是跨浏览器，它目前仅可用作伪元素的content属性的一部分，例如。

.foo:after { content: attr(title); }

更多信息at this question。

here on CSS Tricks。

Answer 2

如果你使用jQuery：

$(document).ready(function() {
    $('#wizHeader li a[title^="step_"]').each(function(k, v) {
        var title = $(v).attr('title');
        $(v).attr('style', 'background-image: url("../images/' + title + '.png")');
    });
});