通过 CSS 更改 img 中的内容答案

【问题标题】：Change content in img through CSS通过 CSS 更改 img 中的内容
【发布时间】：2013-08-04 12:22:18
【问题描述】：

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

如何让图片显示出来？我在控制台中没有收到任何错误。

【问题讨论】：

如果没有src，则不应使用img 标签。它使浏览器感到困惑。
是否可以通过CSS指定src？
看起来像stackoverflow.com/questions/2182716/…的重复
7 个答案，它们在某种程度上都是错误的。很快就会有人正确回答...
@thirtydot 感谢您指出这一点。

标签： html css image

【解决方案1】：

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

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

您应该改用以下方法：

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

【讨论】：

这是一个合理的答案。我删除了第一组代码，因为没有人应该使用它，因为它只适用于 WebKit 浏览器，而且总体上是个坏主意。如果您不同意，请随时回复。
@thirtydot - 感谢清理我的帖子，确实没有必要发布不适用于所有浏览器的代码。顺便说一句，我不是母语人士，所以再次感谢您对文本的更正。

【解决方案2】：

使用下面的

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

【讨论】：

也许你的意思是img.social？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

通过js可以设置src属性。

【讨论】：

【解决方案5】：

这里是JSFiddle

请将您的.social #facebook img {...} 更改为#facebook {...}

因为你必须将图片 url 设置为 img tag id

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

因为您需要设置获取图片的内容网址。

喜欢

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

【讨论】：

【解决方案6】：

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>

【讨论】：

【解决方案7】：

您的问题是您需要在 CSS 的内容和链接中将您的图片 URL 包含在 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>

【讨论】：