我无法理解为什么旋转会影响固定的移位图像。在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);
}
答案 0 :(得分:7)
不确定为什么chrome表现如此,但似乎使用z-index
修复了这个问题,我搜索了类似的Bug,但似乎没有报告相同的行为,所以可能是它是一个bug
.hover {
z-index:1;
/* Other properties */
}
事实是background-attachment
属性与其他元素无关,而且,您的元素位于absolute
,因此它已经不在流程中,因为非其他浏览器的行为因此,我们可以将其视为一个错误。
答案 1 :(得分:5)
也可以通过从position:relative
移除.img
来解决此问题(我无法根据OP示例查看选择器拥有此属性的原因):
.img {
margin-top: 20px;
height: 200px;
width: 100%;
background: url("http://goo.gl/jY7Kwv");
background-size: cover;
background-attachment: fixed;
}
示例:http://jsfiddle.net/4sUCp/9/
正如Alien先生所提到的,这可能是Chrome与您当前的CSS的错误。
如果在同一级别使用多个元素的z-index
,我建议您设置自己的position: relative | absolute
。如果未设置,则应用z-index: auto
。不要让机器接管你的CSS。