CSSの背景イメージをプログラムで設定する

Question

：タグの前に、ボタンのボタンのアイコンを設定するメニューが私のサイトにあります。これは、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> 

、明らかにそれが動作していないとhere

を述べたようにsupported wellではありませんんので、私は私の知る限り「として間違っているかもしれないが、 the away：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

まず、CSSでのattr（）目的球はbackground-imageプロパティはサポートされていません。

を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++; 
    });