Question

我正在研究一个jquery插件。我需要在图像上制作蒙版效果。 FF上的一切都很顺利，但Chrome和Opera无法正常工作。

这里是html结构

<div id="container">
    <img src="http://lorempixel.com/300/200" />
</div>

和css

#container, #container img { border-radius: 150em;}  
#container img:hover {opacity: 0.5; }
#container {
     overflow: hidden;
     background: #000;
     width: 200px;
     height: 200px;
}

他是jsfiddle http://jsfiddle.net/geedmo/qQUfA/

Chrome看起来很好，直到悬停，但Opera工作非常糟糕。无论如何都要在不改变html结构的情况下实现蒙版效果？

更新：我需要裁剪图片

提前致谢。

Answer 1

似乎工作正常：http://jsfiddle.net/qQUfA/4/我必须为图像添加高度和宽度：

#container img {
    width: 100%;
    height: 100%;
}

悬停时具有边框半径和不透明度的图像

1 个答案: