CSS opacity +調整大小導致圖像在Firefox上重複37

每當我使用影響圖像或背景圖像的CSS不透明度時，我在Firefox 37.0.2上遇到了一個惱人的問題。它導致一個圖像被重複，而不是顯示其他圖像。我不知道我是否清楚，但在網上找不到任何關於它的討論。CSS opacity +調整大小導致圖像在Firefox上重複37

顯然我注意到很多網站上的這種行爲，因爲問題是非常基本的，所以我猜它隻影響我（可能是特定的插件或設置？），但我必須確保並問你。

這裏有一個關於它的小提琴：jsfiddle

<div class="a"> 
<div><img src="http://lorempixel.com/400/400" /></div> 
<div><img src="http://lorempixel.com/401/400" /></div> 
... 
</div> 

<div class="b"><!-- test div without opacity --> 
<div><img src="http://lorempixel.com/400/400" /></div> 
<div><img src="http://lorempixel.com/401/400" /></div> 
... 
</div>

的CSS：

div div{ 
    width:20%; 
    float:left  
} 
div div img{ 
    width:100%;  
} 
div.a div img{ 
    opacity:.4 
}

，我從Firefox拿着截圖：screenshot

它完全如預期在任何其他瀏覽器我已經測試過它。

編輯

由於CairoCoder的答覆，我意外地發現，它不僅影響其大小縮小到適合包裝DIV的圖像。

因此，不透明度+縮小尺寸是產生我的問題的兩個屬性。

我仍然不知道爲什麼它的行爲如此，或者如果它只是我自己的Firefox正在竊聽。

最重要的是 我不希望人們浪費太多時間在這個問題上。我主要關心的是要知道這個問題是否已知，轉載/報告，應該修復，還是隻是我的Firefox表現不好。如果以前從未有人經歷過這種特定行爲 - 例如屏幕截圖上顯示的內容 - 那麼我會忽略它。

來源

2015-05-13 Romain Mill

定義周圍圖像/移動元件一個div包裝與max-height:集和overflow-x: hidden;也給你的元素造型selectors而是採用全球<div>和<a>標籤。

編輯：

這個問題的根源是你的圖像是從來;沒有其他的。你沒有文件類型。我沒有看到.jpg或.png等等。他們似乎在動態地填充某處，就像我刪除了一個，出現了另一個。你也有兩排「圖像」，名稱完全相同，這進一步證明了我的觀點。如果您需要使用實際圖像，請檢查這些圖像路徑。下載它們，在本地託管它們，確保它們是正常的保存圖像，擴展名爲.jpg等等，並且正確調用它們，你的問題就會消失。

但是，當樣式變得混亂，特別是使用僞選擇器和繼承時，也添加全局標籤用法，這部分只是一個建議。

來源

2015-05-13 16:01:55

感謝您的答覆。我不太清楚它是如何修復它的，因爲我唯一的問題是與不透明屬性以及它在屏幕截圖中顯示的奇怪行爲有關，而不是溢出和選擇器。但是，再次，它可能不是一個真正的錯誤，但只是一個奇怪的事情發生在我身上 –

已更新的答案。 –

使用的圖像只是常見的佔位符，是實際的圖像。使用帶擴展名的本地圖像時遇到同樣的問題。我使用相同的行/名稱以便與不透明度進行比較。我試圖保持代碼非常簡單，只是針對我與不透明的問題。其餘的都應該正常工作 –

嘗試向圖像添加擴展名。

<div class="a"> 
<div><img src="https://lh6.googleusercontent.com/-duniA1A1C0c/UXWqPdzXeCI/AAAAAAAAKio/Mj3DIbKXV7s/w126-h126-p/HD_beautiful_nature_landsacpe_2.jpg" /></div> 
<div><img src="https://lh5.googleusercontent.com/-IdeJ_2r_7hk/UJ9DtKJx0TI/AAAAAAAAFnw/sZ8FQ-8lGjE/w126-h126-p/fabulous-nature-scenery-25-photos-12.jpg" /></div> 
<div><img src="https://lh6.googleusercontent.com/--0CjkmkSU_8/U-DkyWhcX5I/AAAAAAAAIf8/hvpgW5UCnb0/w126-h126-p/Nature-0057.jpg" /></div> 
<div><img src="https://lh3.googleusercontent.com/-etqb2vA6RFg/T0Jmv2PtprI/AAAAAAAAEmY/Rz30YnMNX7E/w126-h126-p/Japanese+Nature+Picture+%2818%29.jpg" /></div> 
<div><img src="https://lh6.googleusercontent.com/-Hf-iWqukw-w/UJ9Ds7xTYQI/AAAAAAAAFns/wNQ-2K9no-Y/w126-h126-p/fabulous-nature-scenery-25-photos-11.jpg" /></div> 
</div> 
<div class="b"> 
<div><img src="https://lh6.googleusercontent.com/-duniA1A1C0c/UXWqPdzXeCI/AAAAAAAAKio/Mj3DIbKXV7s/w126-h126-p/HD_beautiful_nature_landsacpe_2.jpg" /></div> 
<div><img src="https://lh5.googleusercontent.com/-IdeJ_2r_7hk/UJ9DtKJx0TI/AAAAAAAAFnw/sZ8FQ-8lGjE/w126-h126-p/fabulous-nature-scenery-25-photos-12.jpg" /></div> 
<div><img src="https://lh6.googleusercontent.com/--0CjkmkSU_8/U-DkyWhcX5I/AAAAAAAAIf8/hvpgW5UCnb0/w126-h126-p/Nature-0057.jpg" /></div> 
<div><img src="https://lh3.googleusercontent.com/-etqb2vA6RFg/T0Jmv2PtprI/AAAAAAAAEmY/Rz30YnMNX7E/w126-h126-p/Japanese+Nature+Picture+%2818%29.jpg" /></div> 
<div><img src="https://lh6.googleusercontent.com/-Hf-iWqukw-w/UJ9Ds7xTYQI/AAAAAAAAFns/wNQ-2K9no-Y/w126-h126-p/fabulous-nature-scenery-25-photos-11.jpg" /></div> 
</div>

jsfiddle

來源

2015-05-13 16:35:37 CairoCoder

謝謝。我使用的佔位符圖像僅作爲示例，爲了節省我一些時間，但擴展應該沒有關係。我遇到了與本地文件相同的問題。但你的例子實際上有幫助！當我第一次看到它時，一切看起來都很完美，我很困惑bc我知道它不是關於擴展。但是，當調整圖像的框架並因此重新調整圖像本身時，「事物」再次發生。所以，現在我可以告訴問題是圖像的樣式是不透明的，並減小了尺寸。我仍然不知道爲什麼！ –

CSS opacity +調整大小導致圖像在Firefox上重複37

回答

相關問題