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

Posted 2023-03-06

【中文标题】CSS：圆角 + 不透明度 = 图像在 Firefox 19 中消失

【英文标题】：CSS: round corners + opacity = image disappears in Firefox 19

【发布时间】：2013-03-18 05:06:23

【问题描述】：

我想使用 CSS 为我的图像添加圆角，并更改鼠标悬停时的不透明度，因为这很可爱。有个bug：鼠标悬停后，图片消失了。

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 也只是为了测试（这是我用谷歌搜索的第一张图片）：

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

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

浏览器：ff19

【问题讨论】：

在 chrome 中运行良好...您使用的是什么浏览器？

问题已更新，ff19

如果在悬停时你改变了整个元素的不透明度，而不仅仅是图像？ .article:hover opacity: 0.8;

是的。我可以在 Linux 的 FF 19.0.2 中复制它。讨厌的一个。绝对是浏览器错误。已将示例简化为 <img> 内的 <div>，它仍然会发生。

@freemanoid：如果它在 JSFiddle 之外工作，则忽略 JSFiddle。并非所有浏览器中的 JSFiddle 都可以正常工作。

【参考方案1】：

FWIW，我在 Chrome 38 中遇到了类似的问题。在我的例子中，我有一个带有 border-radius 值的 div 和一个带有透明度值的图像元素，透明图像被隐藏了。为了解决这个问题，我为父元素添加了一个非 1 的不透明度（带有边框半径）。像这样的：

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


.transparent 
  opacity: 0.6;


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

... 将opacity: 0.999999; 添加到父元素使透明元素正确显示。我应该注意，我还有很多其他有趣的样式在进行中 - 阴影、列布局 - 但是，也许类似的 hack 也适用于其他人。

【参考方案2】：

我最近在尝试在my website 上实现块级链接时遇到了这个问题，我通过在未悬停的 img 声明中添加以下规则来解决它：

border: 0.001em solid transparent;

可以肯定的是，这是一个 hack，但它似乎有效。

【讨论】：

所讨论的结构（本页标题）适用于同时支持不透明度和边框半径的所有浏览器。在 Firefox 20.0.1 中，图像在“mouseout”中消失。添加细透明边框将其修复为 FF 而不影响在其他浏览器中的呈现。

你是对的 Trace Meek。这治愈了我的 css:border:1px solid transparent;

我在 android（Chrome 浏览器）上使用 Ionic 框架时遇到了类似的边界半径问题，导致图像消失。此修复也适用于此。

作为补充，这对我来说效果更好。原代码剪掉了一些圈子：border: 1px hidden;

【参考方案3】：

我认为您在 css 中存在问题，因为 li:hover 它占用了 100% 的宽度。所以直到你的鼠标光标在你的图像效果上不透明度。只需尝试以下 CSS 更改

.img a:hover
  opacity: 0.8;
 

【讨论】：

请不要添加“谢谢”作为答案。相反，请为您认为有帮助的答案投票。