为什么我的图片不能在firefox浏览器中加载，而是在safari/chrome上加载？

我想知道为什么我的图片不加载Firefox浏览器，但加载Safari浏览器/铬？为什么我的图片不能在firefox浏览器中加载，而是在safari/chrome上加载？

.shape { 
 
     border-radius: 25px; 
 
     background: #4D5061; 
 
     content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); 
 
     color: white; 
 
     height: 300px; 
 
     margin: auto; 
 
     padding: 3px; 
 
     width: 300px; 
 
     top: 15%; 
 
     left: 50%; 
 
     position: absolute; 
 
     margin-left: -150px; 
 
     z-index: 10; 
 
     }

<div class="shape"></div>

来源

2017-04-11 l.docherty1

Firefox开发人员工具中的“网络”选项卡显示获取图像的请求是什么？ –

为什么你在这里使用'content'css属性？ – Ibu

尝试background-image代替。作为Mozilla support page

的内容 CSS属性用于与::before和::after伪元素，以生成式中的元件的内容。

.shape { 
 
     border-radius: 25px; 
 
     background: #4D5061; 
 
     background-image: url('http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg'); 
 
     color: white; 
 
     height: 300px; 
 
     margin: auto; 
 
     padding: 3px; 
 
     width: 300px; 
 
     top: 15%; 
 
     left: 50%; 
 
     position: absolute; 
 
     margin-left: -150px; 
 
     z-index: 10; 
 
     }

<div class="shape"></div>

来源

2017-04-11 22:19:00 Adam

改变你的CSS这一点。不要使用content作为背景图片，因为有更简单的方法。尝试使用background shorthand（您也可以使用background-image）。

.shape { 
 
     border-radius: 25px; 
 
     background: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg) center no-repeat #4D5061; 
 
     color: white; 
 
     height: 300px; 
 
     margin: auto; 
 
     padding: 3px; 
 
     width: 300px; 
 
     top: 15%; 
 
     left: 50%; 
 
     position: absolute; 
 
     margin-left: -150px; 
 
     z-index: 10; 
 
}

<div class="shape"></div>

来源

2017-04-11 22:19:14

试试这个

.shape :: {前内容：网址（ “链接”）;}

来源

2017-04-11 22:23:29 Osama

历史上content财产was only defined for pseudo-elements。 Firefox的当前实现只支持这个用例。

例如，

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

会工作。在问题中使用真实元素，

.foo { 
    content: 'hi'; 
}

目前在Firefox中不起作用。

来源

2017-04-11 22:29:42 guest

其实，这样做：

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

工程为Chrome，Firefox和Safari。

只是要小心从img中删除alt属性，否则您将在Firefox浏览器中看到alt值和实际图像。

来源

2017-05-05 14:22:21 SrAxi

为什么我的图片不能在firefox浏览器中加载，而是在safari/chrome上加载？

回答

相关问题