Question

相关的JSFiddle - http://jsfiddle.net/Efqda/

CSS -

.social img {
    width: 128px;
    height: 128px;
    opacity: .5;
}

.social img:hover {
    opacity: 1.0;
}

.social #facebook img {
    content: "https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png";
}

HTML -

<a href="facebook.com"><img class="social" id="facebook"></a>

如何显示图像？我在控制台中没有出现任何错误。

Answer 1

要修复代码，首先需要修复选择器。例如，.social img表示每个<img>元素，它是具有类social的另一个（不同）元素的子元素。此外，所有id都必须是唯一的，因此不需要.social #facebook，.#facebook就足够了。

但是，这种方法从一开始就存在缺陷，因为使用CSS来设置src（img）only works in Chrome（和其他WebKit浏览器）的content: url("http://....");。< / p>

您应该使用以下方法：

a[href="http://facebook.com"] {
    background: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png") no-repeat;
    width: 128px;
    height: 128px;
    opacity: .5;
    display: inline-block;
}
a[href="http://facebook.com"]:hover{
    opacity: 1.0;
}

使用此HTML标记：

<a href="http://facebook.com"></a>

Fiddle here

另见：

Define an <img>'s src attribute in CSS

Answer 2

使用以下

 img.social {
    background :url(/facebook-128-black.png) no-repeat;
    width: 128px;
    height: 128px;
    opacity: .5;
}

Answer 3

一些问题，你的CSS选择器是错误的，如果你有一个id然后只是使用它，你还需要指定内容来自外部源使用url（）

#facebook {
    content: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png");
}

Answer 4

img.social {
  width: 128px;
  height: 128px;
  opacity: .5;
  background-image:url(https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png);
}

你的链接href也错了..它应该是

<a href="http://www.facebook.com">
   <img class="social" id="facebook">
</a>

Answer 5

这是JSFiddle

请将.social #facebook img {...}改为#facebook {...}

因为您必须将图片网址设置为img标记ID

并将contect:...更改为content:url("");

因为您需要从必须获取图像的地方设置内容网址。

<强>像

#facebook {
  content: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png");
}

Answer 6

使用css，您可以设置背景图像。

使用js你可以设置src属性。

Answer 7

您的问题是，您需要将图片网址封装在内容和CSS链接中的url()内。使用Class或ID但不能同时使用。

根据您的样式表.social #facebook img

内部有一个类social，其中有一个ID为facebook且位于元素img内的元素。

在这里，您可以看到与CSS样式相匹配的示例。JSFiddle

这是一个直接的前向解决方案 JSFiddle

您还可以使用内联CSS

<a href="facebook.com">
    <img class="social" id="facebook" style="content: url(https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png&quot;);"/>
</a>

通过CSS更改img中的内容

7 个答案:

Fiddle here