我正在开发一个 jquery 插件。我需要在图像上制作 mask 效果。在 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结构的情况下实现 mask 效果?
更新:我需要裁剪图像
提前致谢。
最佳答案
似乎工作正常:http://jsfiddle.net/qQUfA/4/我必须为图像添加高度和宽度:
#container img {
width: 100%;
height: 100%;
}
关于javascript - 悬停时具有边框半径和不透明度的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13127420/