CSS - 키 프레임이 배경 이미지의 축척을 변환합니다

Question

here처럼 뒤로 이미지의 확대 효과를 얻고 싶습니다.

전체 페이지를 차지하는 div가 있습니다. 나는 전체 화면 배경 이미지를 가지고있다. 이미지를 확대하거나 축소하거나 왼쪽에서 오른쪽으로 이동해야합니다. keyframes을 사용하여 시도 했으므로 이미지를 처음 사용하는 순간이므로 배경 이미지를 확대하는 효과를 얻는 방법을 모르겠습니다. . 내 코드를 사용하면 div의 모든 요소가 배경 이미지뿐만 아니라 확대/축소되어 확대/축소됩니다. 이를 피하고 배경 이미지를 확대하고 축소하거나 페이지의 다른 요소에 영향을 미치지 않으면 어떻게됩니까?

#app { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background-image: url('/img/cover.png'); 
    background-size: cover; 
    background-position:center center; 
    animation: zoom 30s infinite; 
} 

@keyframes zoom { 
    0% { transform:scale(1,1); } 
    50% { transform:scale(1.2,1.2); } 
    100% { 
     transform:scale(1,1); 
    } 
} 

및 HTML :

<div id="app"> 

    <div id="main-section"> 
     ... 
    </div> 

    <div id="drawer"> 
     <div id="item-detail"> 
     </div> 
     <div id="item-detail-carousel"> 
     ... 
     </div> 
    </div> 

    <div class="large-10 large-centered columns content"> 
     content .. 
    </div> 
    </div> 

Answer 1

당신이 할 수있는 일 같은 :

body { 
    min-height:100% 
} 
#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow:hidden; 
} 
.background { 
    position:absolute; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    animation: zoom 30s infinite; 
} 
@keyframes zoom { 
    0% { transform:scale(1,1); } 
    50% { transform:scale(1.2,1.2); } 
    100% { transform:scale(1,1); } 
} 

그리고 HTML :

<div id="app"> 
    <img class="background" alt="Bg" src="image-surce.jpg"/> 
    <div id="main-section"> 
     ... 
    </div> 

    <div id="drawer"> 
     <div id="item-detail"> 
     </div> 
     <div id="item-detail-carousel"> 
     ... 
     </div> 
    </div> 

    <div class="large-10 large-centered columns content"> 
     content .. 
    </div> 
</div> 

0,123,516

이

내 CSS입니다

이것은 더 좋은 방법입니다. 이미지 태그를 사용하여 CSS 기술을 사용하여 배경으로 넣은 다음 이미지에 확대/축소를 적용 할 수 있습니다. 그래서 원하는 효과를 보여줍니다.