如何僅縮放背景圖片

Question

我掙扎着放大效果只適用於背景圖片。此代碼將放大「橫幅」類的所有元素，但我只想爲我的背景圖像進行無限縮放。

index.html.erb

<div class="banner"> 
    <h1>START YOUR JOURNEY</h1> 
    <h1>TO HEALTHY LIFE</h1> 
</div> 

application.css.scss

.banner{ 
     height:100vh; 
     background: url(image-path('swim.jpg')) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     padding-top: 10em; 

     -webkit-animation: zoom 50s; 
     animation: zoom 50s; 

     @keyframes zoom { 
     from { 
       transform: scale(1,1); 
     } 
     to { 
       transform: scale(1.5,1.5); 
     } 
     } 

     h1{ 
     font-size: 5.5em; 
     margin:0; 
     color:$white; 
     padding-bottom: .3em; 
     } 
    }/*banner */ 

的jsfiddle代碼： enter link description here 放大效應不上的jsfiddle工作，但我想知道如何風格只有背景圖像？

Answer 1

使用位置絕對方法。 Fiddle

.parent { 
    width: 400px; 
    height: 300px; 
    position:relative; 
} 

.child { 
    position:absolute; 
    width: 100%; 
    top:0; 
    left:0; 
    height: 100%; 
    background-color: black; /* fallback color */ 
    background-image: url("https://s22.postimg.org/h6qgvklpd/html5.png"); 
    background-position: center; 
    background-size: cover; 
    transition: all .5s; 
    z-index: -1; 
} 

參考Article on css-tricks