我无法理解为什么旋转会影响固定的移位图像.在IE,FF,Opera上,一切都很好.演示:
http://jsfiddle.net/4sUCp/10/.请帮忙.
HTML:
<div class="hover">HOVER ME</div> <div> <div class="img" style="left:0;"> <div class="hover">HOVER ME</div> </div> <div class="img img2" style="right:0;"> <div class="hover">HOVER ME</div> </div> </div>
CSS:
.img { position: absolute; margin-top: 20px; height: 200px; width: 50%; background: url("http://goo.gl/jY7Kwv"); background-size: cover; background-attachment: fixed; } .img2 { background: url('http://hq-wallpapers.ru/wallpapers/2/hq-wallpapers_ru_girls_9386_1920x1080.jpg'); background-size: cover; background-attachment: fixed; } .img:hover { width: 80%; z-index: 2; } .hover { position: absolute; top: 0; left: 0; z-index:1; transition: 0.5s; } .hover:hover { transform: translateY(10px) rotate(90deg); }
解决方法
不知道为什么chrome表现如此,但似乎使用z-index修复了这个问题,我搜索了类似的Bug,但似乎没有报告相同的行为,所以可能是它是一个bug.
.hover { z-index:1; /* Other properties */ }
事实上,background-attachment属性与其他元素无关,而且,你的元素是绝对定位的,所以它已经不在流程中了,因为非其他浏览器就是这样,我们可以把它当作一个bug.