溢出隐藏中断镀铬答案

【问题标题】：Overflow hidden break chrome溢出隐藏中断镀铬
【发布时间】：2013-09-23 12:35:04
【问题描述】：

谁能告诉我如何在 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 上，当动画发生时，可以在圈外看到图像。

有什么帮助吗？

Imagem http://studio3pixels.com/img.png

【问题讨论】：

所以那些角不应该被看到？看起来你遇到了这个错误：stackoverflow.com/questions/5736503/…
我查看了示例并编辑了 jsfiddle，看看发生了什么jsfiddle.net/ff5Nk/746
对此有一个“解决方案”，但如果在包装 div 周围使用边框，它仍然会中断。使用 -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);在包装器 div 上。

标签： css google-chrome animation

【解决方案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>

【讨论】：