Question

我只为背景图片与缩放效果进行斗争。此代码缩放＆＃34; banner＆＃34;的所有元素类，但我只想为我的背景图像进行无限缩放。

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

如何仅缩放背景图像

1 个答案: