background-size가있는 background-transition : cover

Question

이것은 이미 어딘가에 있을지 모르지만 나는 약간의 검색 후에 발견하지 못했습니다.

배경 이미지가있는 일련의 div가 있습니다. 크기는 background-size : cover로 설정됩니다.

하지만 이미지를 확대하고 마우스를 올려 놓으면 커질 수 있기를 바랍니다. 이 전환은 보이는 표지 특성과 함께 작동하지 않습니다. 사실 이미지는 전환 효과없이 확대됩니다. 그것은 즉시 "표지"에서이 경우 110 %로 이동합니다. 원래의 배경 크기가 100 %로 설정된 경우 제대로 작동합니다.

그러나 이것으로 페이지의 크기를 조정할 때 이미지가 div 뒤에 다소 비춰진 것처럼 보이지만 이는 내가 원하는 것이 아닙니다. 커버는 언제나 중심을 유지합니다.

표지 또는 동일한 효과로 커지면서 전환을 수행하는 방법에 대해 조언 해 주시면 감사하겠습니다. 배경 크기에 대한 CSS 애니메이션을 사용하는 경우

Ilmiont는

Answer 1

당신은 (예 : 커버 등) 키워드를 사용할 수 없습니다.

여기

더 많은 정보 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

관련 텍스트 :

배경 크기 - 네, 길이 비율 또는 CALC의 간단한 목록의 반복 목록()와 같은; 두 값이 모두 길이 인 경우 길이는 길이로 보간되어 입니다. 두 값이 모두 백분율 일 경우 백분율로 보간됩니다 ( ). 그렇지 않은 경우 두 값은 길이와 백분율 (각각 , 가능하면 0)의 합계 인 calc() 함수로 변환되며이 calc() 함수는 각 반을 을 실수로 보간합니다. . 키워드 값을 애니메이션화 할 수 없음을 의미합니다.

이 효과를 얻으려면 배경 이미지가있는 요소를 오버플로가있는 래핑 요소에 배치하고 눈금 변형을 적용해야합니다.

.wrapper { 
 
    width:300px; 
 
    height:400px; 
 
    overflow:hidden; 
 
} 
 
.image { 
 
    background:url("http://placekitten.com/g/500/500"); 
 
    background-size:cover; 
 
    width:100%; 
 
    height:100%; 
 
    transition: transform 2s; 
 
} 
 

 
.image:hover { transform:scale(1.1) }

<div class="wrapper"> 
 
    <div class="image"></div> 
 
</div>