Question

在我的网站上，关键帧动画应该用蓝色图像着色。但是位置：固定的属性使这个相同的图像响应似乎混乱的关键帧。

如果我移除位置：固定，则会发生蓝色色调转换。但当我把它放回去时，色调过渡是白色而不是蓝色。

对于codepen：click here

有没有办法让这两个属性一起工作？

以下是代码：

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="hover-min.css" />
    <link rel="stylesheet" href="main.css" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script type="application/javascript" src="dist/js/jquery-2.1.4.min.js"></script>       
    <script type="application/javascript" src="dist/js/bootstrap.min.js"></script>
    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="background.js" type="text/javascript"></script>
 </head>

<body>
    <div id="opacity"> <!-- DIV containing the image supposed to turn blue -->
        <img src="http://www.nexusyouthsummit.org/wp-content/uploads/2013/09/nyc-fisheye-20121.jpg" alt="" class="nyc" />
    </div>      
</body>
</html>

/* CSS */
img.nyc {
    *position:fixed; /* property messing with the blue tint transition, rendering it white unless I remove it */
    top:0;
    left:0;
    z-index:-1;
}

#opacity {
    background-color: #428BCA;
    display:inline-block;
}
#opacity img {
    height : 300px;
    opacity: 0.5;
    -webkit-animation: animation 2s linear;
    -moz-animation: animation 2s linear;
    -ms-animation: animation 2s linear;
    -o-animation: animation 2s linear;
    animation: animation 2s linear;
}

@-webkit-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@-moz-keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}
@-ms-keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}
@-o-keyframes animation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0.5;
    }
}
@keyframes animation{
    from{
        opacity: 5;
    }
    to{
        opacity: 0.5;
    }
}

Answer 1

“＃opacity”不知道将它的子项设置为position后应该有多大：absolute或position：fixed。如果你设置

#opacity {
    height : 300px;
    width: 660px;
    position: fixed;
    background-color: #428BCA;
    display:inline-block;
}

它会再次运作。

你可能需要一些js代码来裁剪父母给它最大的孩子。（https://stackoverflow.com/a/2822685/5191731）

Answer 2

将固定定位移至#opacity：

#opacity {
  position: fixed;
}

位置：修复了关键帧动画的混乱

2 个答案: