Html 为什么'；我的图像不是在firefox浏览器上加载，而是在safari/chrome上加载？

我想知道为什么我的图像不加载在firefox浏览器上，而是加载在safari/chrome上

.shape{
边界半径：25px；
背景：#4D5061；
内容：网址(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
颜色：白色；
高度：300px；
保证金：自动；
填充：3倍；
宽度：300px；
最高：15%；
左：50%；
位置：绝对位置；
左边距：-150px；
z指数：10；
}

---

试试背景图像。一如

contentCSS属性与

：before

和

：：after

伪元素一起使用，以生成元素中的内容

.shape{
边界半径：25px；
背景：#4D5061；
背景图像：url（'http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg');
颜色：白色；
高度：300px；
保证金：自动；
填充：3倍；
宽度：300px；
最高：15%；
左：50%；
位置：绝对位置；
左边距：-150px；
z指数：10；
}

---

将您的CSS更改为此。不要对背景图像使用

内容

，因为有一种更简单的方法。请尝试使用（也可以使用

背景图像）


.shape{
边界半径：25px；
背景：url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg)中心不重复#4D5061；
颜色：白色；
高度：300px；
保证金：自动；
填充：3倍；
宽度：300px；
最高：15%；
左：50%；
位置：绝对位置；
左边距：-150px；
z指数：10；
}
试试这个

.shape：：在{content:url（“link”）；}
之前历史上使用
内容
属性。Firefox的当前实现仅支持此用例

比如说,

.foo::before {
  content: 'hi';
}

会有用的。在问题中的实际元素上的用法

.foo {
  content: 'hi';
}

目前在Firefox中不起作用。
实际上，通过这样做：

.shape, .shape:after {
   content: url('path');
}

适用于Chrome、Firefox和Safari

唯一需要注意的是从
img
中删除
alt
属性，否则您将在Firefox浏览器中看到
alt
值和实际图像。
网络是什么Firefox开发者工具中的选项卡显示获取图像的请求？您在此处使用
content
css属性的原因是什么？