srcが外部CSSで定義されていると画像が表示されない - すべてのブラウザ

Question

私は、既存のコードを使用してファイルを別の場所に移行することに関係するクライアントのプロジェクトに取り組んでいます。変換されるファイルにはまだ移動できない画像が含まれているので、コードを将来的に証明するために、CSSを使用して画像srcを "a"タグに埋め込んで定義します。

\t .iconWriting::before { \t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png"); 
 
\t } 
 
\t iconWriting { 
 
\t \t width: 32px; 
 
\t \t height: 32px; 
 
\t \t margin: 1px; 
 
\t \t border: none; 
 
\t \t float: right; 
 
\t \t }

<a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a>

その場所を定義するCSSスタイルは、文書の頭にあるときは残念ながら、画像は正しく表示されます。これらのスタイルを外部CSSファイルに格納する必要がありますが、以前に動作していたCSSを外部ファイルに移動すると、CSSが破損します。イメージの代わりに、すべてのブラウザでaltテキストを取得するだけです。クラス指定に "：before"を追加しようとしましたが、これはうまくいきませんでした。

は、ここで作業コードのフィドルです：これで彼の助けのための@MrリスターにJS Fiddle

Answer 1

おかげ。解決策は、 "content"プロパティを使用してイメージsrcを指定するときに "a"タグをターゲットにすることです。

/*Weekly Activity Styles*/ 
 

 
\t .activityWrapper { 
 
\t \t width: 96%; 
 
\t \t overflow-x: hidden;" 
 
\t } 
 
\t 
 
\t /*Upper Right Icons*/ 
 
\t .iconExpand::before { 
 
\t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/V2/icon/sm_expand.png"); 
 
\t } 
 
\t .iconAcademic::before { 
 
\t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/academic_research_policy.png"); 
 
\t } 
 
\t .iconWriting::before { 
 
\t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/images/icons/writing_standards_resources.png"); 
 
\t } 
 
\t .iconExpand, .iconAcademic, .iconWriting { 
 
\t \t width: 32px; 
 
\t \t height: 32px; 
 
\t \t margin: 1px; 
 
\t \t border: none; 
 
\t \t float: right; 
 
\t \t } 
 
\t 
 
\t /*Dropbox & Waypoint Icons*/ 
 
\t .iconDropbox { 
 
\t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Dropbox_small.png"); 
 
\t \t border: none; 
 
\t } 
 
\t .iconWaypoint { 
 
\t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/waypoint_smaller.png"); 
 
\t \t border: none; 
 
\t }  
 
\t 
 
\t .iconWaypointLg { 
 
\t \t content:url("http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/images/Waypoint_image1.png"); 
 
\t \t border: none; 
 
\t } 
 

 
    padding: 15px 20px 5px 15px; 
 
    } 
 
} 
 

 

 

 

 

 

<div class="activityWrapper"> 
 
<div class="subParaDisc"> 
 

 
<a target="_new" href="javascript://;" class="iconLink iconExpand" onclick="this.href=document.location"></a> 
 
<a class="iconAcademic" target="_new" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Academic.htm"></a> 
 
\t <a class="iconWriting" href="http://wpc.6FDC.edgecastcdn.net/006FDC/UOR_Curriculum/V3/courseFramework/StartHere/V3_Start_Here-Writing.htm" target="_blank"></a> 
 
<h1> 
 
The Icons above only work when the style defining their img content is in the head of the HTML doc.</h1> 
 

 

 

 
</div> 
 
</div>

リファレンスサンプルのため、このフィドル：あなたは外部ファイルにCSSを移動するときhttps://jsfiddle.net/1gxmqnjy/21/