爲什麼我的圖片不能在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上加載？

回答

相關問題