css - 溢出隐藏中断镀铬

Question

谁能告诉我如何在 Chrome 上解决这个问题？在 Firefox 上，它可以完美运行。

div{position: relative; width:200px; height:200px; overflow:hidden;background-color:#fc0;}; div img{opacity:0.2; transition:all 0.5s}

该代码只是我如何使用它的一个示例。动画在 Firefox 上完美运行，图像一直被圈起来，但在 chrome 上，当动画发生时，可以在圈外看到图像。

有什么帮助吗？

图片 http://studio3pixels.com/img.png

Answer 1

这是一个使用背景图片的解决方法，希望这个解决方案对你有好处：http: //jsfiddle.net/yucp2/

<style>
#wrapper
{
     width: 300px; height: 300px;
     border-radius: 300px;
     overflow: hidden;
     border:solid 10px #000;
     background-color: #f30;
     z-index:3;
}
#wrapper span
{
     width: 300px;
     height: 300px;
     top:0;
     background-color: #cde;
     transition: all 0.5s;
     z-index:1;
     overflow:hidden;
     background-image:url(http://www.paixaoeamor.com/arquivos/fotos/A777C.jpg);
     background-repeat:no-repeat;
     background-size:100% 100%;
     display:inline-block;
     background-position:center center;
 }
 #wrapper:hover > span
 {
     opacity:.5;
     background-size:120% 120%;
 }
 </style>
 <div id="wrapper">
    <span></span>
 </div>