39 
.googlePic{
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

这是我的文件中我的班级的一个googlePic例子css。它可以很好地打印在google chrome和上safari。但是，它不适用于firefox. Nth被打印出来。请帮忙 ：）

4

12 回答 12

30

该content属性与::before和一起使用::after。

googlePic::before
{
 content: url('../../img/googlePlusIcon.PNG');
}

阅读： http ://www.htmldog.com/reference/cssproperties/content/

IE8 仅在content指定了 !DOCTYPE 时才支持该属性。

于 2013-07-28T11:50:53.540 回答
21

我知道这可能是迟到的回应，但我遇到了同样的问题。

我查了一下，不知何故，一个 url 不是有效的“内容”类型，即使 Chrome 和 Safari 都是好人，并且很好地展示了它。

对我有用的是创建一个空的“内容”并使用背景显示图像：它在 Chrome、Firefox、Safari 和 IE8+9 中运行良好

.googlePic:before {
    content: '';
    background: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;
}

编辑：忘了把 :before 放在类名之后

于 2014-06-12T13:12:42.470 回答
15

你必须写两个样式的css类

.googlePic
{  /*this for crome browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

它对我有用:)

于 2014-03-27T08:34:32.307 回答
5

在所有 Web 浏览器中处理图像的最佳方法是使用带有 background-size 的背景 css 属性。但是，IE8 及更低版本将不支持它（占 2014 年观众的 2%）

.googlePic{
    background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
    background-size: contain;
    float:right;
    height: 19px;
}
于 2014-09-23T13:07:45.453 回答
4

我只是添加了“alt”，它可以在不使用伪类的情况下使用

于 2020-10-28T06:32:52.863 回答
3

如果您将标签更改为 div 而不是 img ，则内容应该可以在 Firefox 中使用。

于 2020-01-21T19:28:41.773 回答
1

将alt属性添加到img标签然后使用content="url('...')"将在 Firefox 中工作。例如：

<img class="my-image" alt="myImage" />

.my-image {
  content: url("...");
  width: 10px;
  height: auto;
  display: inline-block;
}
于 2020-07-03T09:47:23.643 回答
1

这救了我。请记住从 中删除alt属性，img否则您将alt在 Firefox 中找到实际图像。

   .googlePic, .googlePic:after{
        content: url('../../img/googlePlusIcon.PNG');
        margin-top: -6.5%;
        padding-right: 53px;
        float:right;
        height: 19px;
    }
于 2017-05-05T14:16:32.243 回答
0

我遇到了同样的问题，在我的情况下，我无法使用content:url(). 我想在一个 div 中显示等待的 gif。我不知道 Mozilla 支持的详细信息。但在我的情况下，它是通过以下代码解决的。

.img_div{
    background-image: url("wait.gif");
    height: 20px;
    width: 20px;
    background-size: contain;
    border: none;
}

它适用于 Chrome 73 和 Firefox 66。

于 2019-04-11T13:17:15.993 回答
0

我最近遇到了同样的问题，上面的解决方案都不适合我。我采取了以下解决方法。

我在我的项目中加入了 Bootstrap 并使用了它的img-responsive类。之后，我只是使用<img class="img-responsive">标签包含图像。它在每个浏览器和每个视口大小上都可以漂亮地显示和缩放。

希望这对某人有帮助。

于 2016-04-28T14:50:27.357 回答
-1

以这种方式为我工作。必须放置文件///，然后放置 url。
文件///C:/user/s/desktop.......jpg

于 2020-06-19T00:08:23.140 回答
-4

您可以尝试将高度和宽度设置为 0，添加填充并设置背景图像。您必须将其设置为 display: block 或 display: inline-block 才能使高度生效。

这是一个例子：http: //jsfiddle.net/zBgHd/1/

于 2015-02-24T11:32:26.260 回答