1
IE9에서 div에 이미지를 두 개 이상 추가 할 수 있으며 IE9에서 배경 위치 및 배경 이미지를 사용할 수 있음을 알고 있습니다. 하지만 내 코드가 작동하지 않아 div를 클릭 할 때 애니메이션이 보이지 않습니다. 왜?IE9에서 css3 요소가 작동하지 않음
HTML (파이어 폭스에서와 크롬 잘 작동) :이 코드입니다
<script type="text/javascript">
$(document).ready(function(){
var bg = $('.second').css('background-image');
$('.second').css('background-image',bg+', url(http://www.dummyimage.com/643x12/001aff/ffffff.png)');
$('.second').css('background-position', '0 0px, 0 -100px');
$(".second").on("click", function() {
$(".second").css('background-position', '0 200px, 0 100px');
});
});
</script>
</head>
<body>
<div class="second">
</div>
CSS :
.second{
position: absolute;
border: solid;
top:0;
left:0;
z-index: 2;
height: 100%;
width: 1000px;
overflow: hidden;
background:url(http://www.dummyimage.com/643x12/001aff/ffffff.png) no-repeat;
transition-property: background-position; /*standard*/
transition-duration: 1s;
-webkit-transition-property: background-position; /*Safari e Chrome */
-webkit-transition-duration: 1s;
-o-transition-property: background-position; /*Opera*/
-o-transition-duration: 1s;
-moz-transition-property: background-position; /*Firefox*/
-moz-transition-duration: 1s;
}
그래도 IE9는 전환이 지원되지 않는다고 생각합니까? –
어떻게 해결할 수 있습니까? 살아 움직이는 사람? –
@AlessandroMinoccheri - http://caniuse.com/#search=transition – Rob