CSS：圓角+不透明度=圖像在Firefox 19中消失

Question

我想使用CSS為我的圖像添加圓角，並在鼠標懸停時更改不透明度，因為這很可愛。 有一個錯誤：鼠標懸停后，圖像消失。

CSS非常簡單：

.article img {
  margin-bottom: 5px;
  -moz-border-radius: 15px;  /* for Firefox */
  -webkit-border-radius: 15px; /* for Webkit-Browsers */
  border-radius: 15px; /* regular */
}

.article:hover .img {
  opacity: 0.8;
}

html也只是為了測試（這是我用Google搜索的第一張圖片）：

<li class="article">
    <div class="img">
        <a href="#">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
        </a>
    </div>
</li>

你可以在jsfiddle上看到它： http ： //jsfiddle.net/9DjLT/3/

瀏覽器：ff19

Answer 1

我最近在嘗試在我的網站上實現塊級鏈接時遇到了這個問題，我通過將以下規則添加到未發布的img聲明中來解決它：

border: 0.001em solid transparent;

一個黑客，當然，但它似乎工作。

Answer 2

我認為你因為li而在css中遇到問題：將其占據100％的寬度。 所以，直到你的鼠標光標在你的圖像效果不透明。 只需嘗試下面的CSS更改

.img a:hover{
  opacity: 0.8;
 }

Answer 3

FWIW，我在Chrome 38中遇到了類似的問題。在我的例子中，我有一個帶有border-radius值的div和一個具有透明度值的圖像元素，並隱藏了透明圖像。 為了解決這個問題，我向父元素添加了非1不透明度（使用border-radius）。 像這樣的東西：

.round_box {
  border-radius: 5px;
  opacity: 0.999999;
}

.transparent {
  opacity: 0.6;
}

<div class="round_box">
  <div class="transparent">
</div>

...添加opacity: 0.999999; 到父元素使透明元素正確顯示。 我應該注意到，我還有很多其他有趣的樣式 - 陰影，列布局 - 但是，也許類似的黑客將適用於其他人。