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上，当动画发生时，图像就可以在圆圈中看到。

任何帮助？

Imagem 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>

溢出隐藏的断裂铬

1 个答案: