如何仅缩放背景图片

问题描述：

我挣扎着放大效果只适用于背景图片。此代码将放大“横幅”类的所有元素，但我只想为我的背景图像进行无限缩放。如何仅缩放背景图片

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工作，但我想知道如何风格只有背景图像？

提供一个codepen或小提琴更好地了解.. –

答

使用位置绝对方法。 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

如何仅缩放背景图片

相关推荐