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

我最近在尝试在my website上实现块级链接时遇到了这个问题，我通过将以下规则添加到未发布的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;添加到父元素使透明元素正确显示。我应该注意到我还有很多其他有趣的样式 - 阴影，列布局 - 但是，也许类似的黑客会对其他人有效。

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

3 个答案: