CSS 内容 url 在 Firefox 浏览器上不显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17907833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Content url does not display image on firefox browser
提问by user2625152
.googlePic{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
This is an example of my class googlePicin my cssfile. It works out and prints out nicely on google chromeand safari. however, it doesn't work on firefox. Nthgets printed out. Please help :)
这是googlePic我的css文件中的类的示例。它可以正常工作并在google chrome和 上很好地打印出来safari。但是，它不适用于firefox. Nth被打印出来。请帮忙 ：）
回答by Mohammad Mahdi Naderi
The contentproperty works with ::beforeand ::after.
该content属性与::before和 一起使用::after。
googlePic::before
{
content: url('../../img/googlePlusIcon.PNG');
}
Read this: http://www.htmldog.com/reference/cssproperties/content/
阅读：http: //www.htmldog.com/reference/cssproperties/content/
IE8 only supports the contentproperty if a !DOCTYPE is specified.
content如果指定了 !DOCTYPE，IE8 仅支持该属性。
回答by 0MBB0
I know this may be a late response, but i came across the same problem.
我知道这可能是一个迟到的回应，但我遇到了同样的问题。
I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.
我查了一下，不知何故一个 url 不是有效的“内容”类型，即使 Chrome 和 Safari 也是好人，并且很好地显示了它。
What worked for me, was creating an empty 'content' and using a background to show the image: it works nicely in Chrome, Firefox, Safari and IE8+9
对我有用的是创建一个空的“内容”并使用背景来显示图像：它在 Chrome、Firefox、Safari 和 IE8+9 中运行良好
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
edit: forgot to put the :before after the classname
编辑：忘记把 :before 放在类名之后
回答by DropAndTrap
you have to write two css class in style
你必须在风格上写两个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;
}
and its works for me :)
它对我有用:)
回答by Romain
The best way to handle images throughout all web browsers is to use the background css property with the background-size. However, IE8 and lower version won't support it (represent 2% of viewer in 2014)
在所有 Web 浏览器中处理图像的最佳方法是将 background css 属性与 background-size 一起使用。但是，IE8 及更低版本将不支持它（占 2014 年观众的 2%）
.googlePic{
background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
background-size: contain;
float:right;
height: 19px;
}
回答by SrAxi
This saved me. Remember to remove altattribute from the imgor you will find the altand the actual image in Firefox.
这救了我。请记住从 中删除alt属性，img否则您将alt在 Firefox 中找到实际图像。
.googlePic, .googlePic:after{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
回答by user11346384
I came across the same problem, in my case I was not able to show the image using content:url(). I wanted to display waiting gif in one div. I don't know the details of Mozilla support. But it is resolved in my case by the following code.
我遇到了同样的问题，就我而言，我无法使用content:url(). 我想在一个 div 中显示等待的 gif。我不知道 Mozilla 支持的详细信息。但在我的情况下，它是通过以下代码解决的。
.img_div{
background-image: url("wait.gif");
height: 20px;
width: 20px;
background-size: contain;
border: none;
}
It is working on Chrome 73 and Firefox 66.
它适用于 Chrome 73 和 Firefox 66。
回答by rupy
If you change the tag to a div and not a img , content should work in firefox.
如果您将标签更改为 div 而不是 img ，则内容应该可以在 firefox 中使用。
回答by ArtforLife
I had the same problem recently and none of the solutions above worked for me. I have resorted to the following work-around.
我最近遇到了同样的问题，上面的解决方案都不适合我。我采取了以下解决方法。
I included Bootstrap in my projects and used its img-responsiveclass.
After that, I simply include the image using the <img class="img-responsive">tag. It displays and scales beautifully on every browser and every viewport size.
我在我的项目中包含了 Bootstrap 并使用了它的img-responsive类。之后，我只需使用<img class="img-responsive">标签包含图像。它可以在每个浏览器和每个视口大小上精美地显示和缩放。
Hopefully this is helpful to someone.
希望这对某人有帮助。
回答by himanshu bharti
You can experiment with setting height and width to 0, add a padding and set the background image. You will have to make it display: block or display: inline-block for the height to take effect.
您可以尝试将高度和宽度设置为 0，添加填充并设置背景图像。您必须使其 display: block 或 display: inline-block 高度才能生效。
Here is an example: http://jsfiddle.net/zBgHd/1/
这是一个例子：http: //jsfiddle.net/zBgHd/1/
