позиция: фиксированный беспорядок с анимацией ключевых кадров

На моем веб-сайте анимация ключевых кадров должна иметь оттенок синего изображения. Но позиция: исправлено свойство, делающее этот самый отзывчивый образ, похоже, путается с ключевыми кадрами.позиция: фиксированный беспорядок с анимацией ключевых кадров

Если я удалю положение: зафиксировано, произойдет переход синего оттенка. Но когда я верну его, переход оттенка будет белым, а не синим.

Для 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; 
    } 
}

источник

2015-09-03 Zaky

codepen ссылка не там – cocoa

К сожалению, сейчас. :) – Zaky

Что делать, если вы переместите позиционирование в '# непрозрачность'? – cocoa

Перемещение фиксированное позиционирование #opacity:.

#opacity { 
    position: fixed; 
}

источник

2015-09-04 14:53:04 cocoa

«#opacity» не знает, насколько велика она должна стать после того, как вы установите его в положение ребенка: абсолютная или позиция: фиксированная. Если вы установили

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

он будет работать снова.

Вы, вероятно, потребуется некоторое JS-код, чтобы обрезать родителю это самый большой ребенок (https://stackoverflow.com/a/2822685/5191731)

источник

2015-09-03 22:32:04 HopefullyHelpful

Синий оттенок переход только в размерах, установленных в ширине и высоте вашего кода. Чтобы это произошло на всем изображении, мне пришлось установить с и высоту в auto. Теперь проблема заключается не в синем переходе оттенков, а в том, что изображение обрезается снизу, когда оно находится не в полноэкранном режиме. – Zaky

позиция: фиксированный беспорядок с анимацией ключевых кадров

ответ

Смежные вопросы