Question

在我的.css样式表中，我试图将图标图像（.gif）与＆lt; a＆gt;关联起来。标签在伪属性之前[即，a：before]，因此无论何时通过其href引用特定文件类型，它都会在链接文本之前显示相关图标。我的代码如下：

a[href$=".pdf"]:before  {  
content:"";  
display:inline-block;  
width:16px;  
height:16px;  
color:#FFF;  
font-size:1em;  
font-weight:bold;  
background-color:transparent;  
background-repeat:no-repeat;  
background-attachment:fixed;  
background-position:center;  
}  
a[href$=".pdf"]:before {
background-image:url(../pics/pdf_icon.gif);
}

.css文件路径：/css/mystyle.css
图像路径：/pics/pdf_icon.gif

此代码块位于css文件的末尾，位于其他锚标识符之后（例如，a：hover，a：link等）

问题是，背景图片没有显示!!!

任何帮助人......？！

Answer 1

使用CSS3为每个链接带来pdf或其他图标的简便方法：

<强> 1。使用FontAwesome中的图标：

a[href$=".pdf"]:before
{
  content:"\f1c1  ";
  font-family: fontawesome;
}

<强> 2。在背景图片中使用图标：

a[href$=".pdf"]
{
  background:url("your-image-url.png") no-repeat left;
  padding-left:25px;
}

使用图标

Answer 2

尝试将您的网址放在引号中：

background-image:url("../pics/pdf_icon.gif");

小提示 - 如果要指定多个图像，请用逗号分隔URL。

Answer 3

删除声明background-attachment:fixed;。并确保文档以“标准模式”呈现。

Answer 4

我尝试删除：

背景附件：固定的;

它有效。我认为“修复”与“之前”不明白在哪里修复它。

自动关联图标为<a> according to file type not working</a>

4 个答案: