-3

相关的 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>

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

4

7 回答 7

4

要修复您的代码，首先您需要修复选择器。例如，.social img表示每个<img>元素都是具有 class 的另一个（不相同）元素的子元素social。而且 allid必须是唯一的，所以不需要.social #facebook,.#facebook就足够了。

然而，这种方法从一开始就存在缺陷，因为使用 CSS 设置src( )仅适用于 Chromeimg（和其他 WebKit 浏览器）。content: url("http://....");

您应该改用以下方法：

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>

在这里提琴

也可以看看：

于 2013-08-03T07:09:29.213 回答
1

使用以下 

 img.social {
    background :url(/facebook-128-black.png) no-repeat;
    width: 128px;
    height: 128px;
    opacity: .5;
}
于 2013-08-03T07:06:55.560 回答
1

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

#facebook {
    content: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png");
}
于 2013-08-03T07:09:30.083 回答
0 
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>
于 2013-08-03T07:09:49.057 回答
0

这是JSFiddle

请更改您的.social #facebook img {...}身份#facebook {...}

因为您必须将图像 url 设置为 img tag id

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

因为您需要从必须获取图像的位置设置内容 url。

像

#facebook {
  content: url("https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-128-black.png");
}
于 2013-08-03T07:10:31.933 回答
0

使用 css 你可以设置免费图像。

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

于 2013-08-03T07:11:17.023 回答
0

您的问题是您需要将图像 URL 包含url()在 CSS 的内容和链接中。使用 Class 或 ID 但不能同时使用。

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

里面有一个类social，里面有一个带有 id 的元素facebook，里面有一个 element 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>
于 2013-08-03T07:19:22.080 回答