javascript - 设置CSS的背景图片:before tag programatically

Question

我的网站上有一个菜单，它使用 :before 标记设置按钮的图标。这对于可以在 CSS 中设置的静态元素效果很好。一些按钮将从网站上的特定用户设置加载。有没有办法在 CSS 中设置这些，如下所示:

.nav-team:before{ background-image:url(attr(src)); }

<li class="nav-team" src="assets/images/profile.png"><a href="#">Team Name</a></li>

显然这不起作用，也不是 supported well如前所述here

我可能是错的，但就我而言，:after 标签无法在 javascript/jquery 中定位或更改。

我愿意接受任何建议，JavaScript、CSS 或 PHP。

HTML:

<li class="nav-btn nav-team" src="assets/images/profile.png"><a href="#">Team Name</a></li>

CSS

li{
    border-top: solid 1px rgba(0, 0, 0, 0.125);
    margin: 0.5em 0 0 0;
    padding: 0.5em 0 0 0;
    position: relative;
}
.nav-btn{
        text-indent:1.5em;
     }
    .nav-btn:before {
        font-family:'FontAwesome';
        position:absolute;
        top:50%;
        -ms-transform:translateY(-50%);
        -o-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
        left:-2em;
        background-size: auto 1.5em;
        background-repeat: no-repeat;
        background-position: 1.5em center;
        width: 3.5em;
        height: 1.5em;
        content:' ';
    }
.nav-team:before{ background-image:url(attr(src)); }
.nav-home:before{ background-image:url(../icons/feed.svg); }
.nav-envelope:before{ background-image:url(../icons/messages.png); }

Answer 1

首先，background-image 属性不支持 css 中的 attr() 函数。

作为Answer在 Question ，您可以编写javascript来设置背景图片。

你可以通过 Jquery 来做到这一点

    var count = 0;
    $('.nav-team').each(function(){
        var nav_team = $(this);
        var data_id='nav_team'+count
        nav_team.attr('data-id',data_id);
        var srcPath = nav_team.attr('src')
        $('head').append('<style></style>');
        $('head style:last').append('[data-id="' + data_id + '"]{  background-image: url("' + srcPath + '"); }');            count++;
    });