web-dev-qa-db-ja.com

背景画像をカバー付きまたはサイズ変更を含むCSSのループ方法

次のようなタイル可能な背景をアニメーション化しようとしているとします。

.container {
  width: 160px;
  height: 91px;
}
.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
@keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
<div class="container">
  <textarea class="bg"></textarea>
</div>

コンテナのサイズを変更するとすぐに、ループアニメーションが中断します。

これをJSなしでレスポンシブにする方法はありますか？

cssresponsive-designcss-animations
33
Vandervals

問題は、応答性を高めるために、パーセンテージを使用してアニメーション化された背景の位置を設定する必要があることです。

ただし、背景サイズを表紙または封筒に設定すると、幅が100％に調整される場合があります。この場合、パーセンテージを使用したバックグラウンド位置は役に立ちません（移動しません）。

これを管理するために私が見つけた唯一の方法は、画像を疑似要素に移動して移動することです。ただし、連続性を維持するには、2つの疑似要素が必要です。

しかし、それはtextareaでは機能しません。

Textareaが要件であることについては何も言わなかったので、これを投稿します。サイズ変更で機能することを示すには、カーソルを合わせます。

.container {
  width: 160px;
  height: 100px;
  position: relative;
  border: solid 1px black;
  display: inline-block;
}
.container:nth-child(2) {
   width: 220px;  
}
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg:before, .bg:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://i.stack.imgur.com/wBHey.png);
    background-size: 100%;
    animation: move 2s infinite linear;
}

.bg:before {
    right: 100%;
}

@keyframes move {
    from {transform: translateX(  0%);}
      to {transform: translateX(100%);}
}
<div class="container">
  <div class="bg"></div>
</div>
<div class="container">
  <div class="bg"></div>
</div>

test image

26
vals

背景を2倍に大きくすることで機能させることができました。

これが完璧な解決策ではないことは知っていますが、画像サイズなどを調整して、思い通りの外観にすることができます。

    .container {width: 160px;height: 91px;}
    .bg {
      width: 100%;
      height: 100%;
      background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
      background-size: 200%;
      -webkit-animation: displace 2s linear infinite;
      animation: displace 2s linear infinite;
    }
    @-webkit-keyframes displace {
      from { background-position: left center;
      } to { background-position: 200% center; }
    }
    @keyframes displace {
      from { background-position: left center;
      } to { background-position: 200% center; }
    }
<div class="container"><textarea class="bg"></textarea></div>
11
Okku

あなたが抱えている問題は、heightのサイズ変更とさまざまな設定にあります。実際の設定で機能させるには、変位を画像のheightの2倍にする必要があります（画像の比率は2：1であるため）。 cssだけでできるとは思いません。

しかし、さまざまなオプションがあります。保持したい表示の部分が正確にわからないため、resizeで翻訳を機能させる3つの方法を次に示します。適切な変位を設定するのが難しい（不可能？）ため、正確に設定されたものはありません。高さに応じて幅を伸ばしているので、なかなか追い付きにくいです。 JSを使用すると簡単ですが、cssはこれらの値へのアクセスが制限されています。

提案されたソリューションは高さを一定に保つので、変位値を一定に保つことができます。

1つ目は、background-sizeはコンテナーのサイズ（px）です。

2番目の解決策は、x軸でのみtextareaのサイズを変更することです。

3番目に、y軸で繰り返し、高さと幅を固定します。

おそらく、特定のニーズにより適した他の回避策があります。

.container {
  width: 160px;
  height: 80px;
   margin: 10px;
}

.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: 160px 80px;
     padding: 0px;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
.bg2 {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
     padding: 0px;
    resize: horizontal;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
.bg3 {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left center;
  background-size: 160px 80px;
     padding: 0px;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}

@-webkit-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
@-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
<div class="container">
  <textarea class="bg"></textarea>
</div>
<div class="container">
  <textarea class="bg2"></textarea>
</div>
<div class="container">
  <textarea class="bg3"></textarea>
</div>
3
Julien Grégoire

各background-position: 200px bottom;追加する必要があります1secondたとえば、2Sを追加する場合は、さらに200pxを追加してbackground-position: 400px bottom; おもう。

これがコードです：

.container {
  width: 160px;
  height: 91px;
}

.bg {
 width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) fixed;
  -webkit-animation: displace 1s linear infinite;
  animation: displace 1s linear infinite;
}

@-webkit-keyframes displace {
  from { background-position: 0 bottom; }
  to { background-position: 200px bottom; }
}

@keyframes displace {
  from { background-position: 0 bottom; }
  to { background-position: 200px bottom;}
}
<div class="container">
  <textarea class="bg"></textarea>
</div>

それがあなたのケースでうまくいくことを願っています、質問があれば教えてください。

2
Mohammed Moustafa

これは画像のサイズを変更しないことを除いて、Ilpoの回答に似ています（_background-size: auto;_）。コンテナのサイズに関係なく、アニメーションは全体的にスムーズです。

欠点は、画像の幅（200px）を事前に知っておく必要があることです。

タイリング可能と言ったので、この画像は両方向にタイリング可能に見えるので、私はそれを両方の次元で繰り返すようにしました。その結果、textareaはタイル状の背景画像で埋められ、水平方向にスクロールするようにアニメーション化されます。 1方向のみに並べて表示する場合は、repeatを_repeat-x_に戻し、垂直位置をtopから必要なものに変更できます。

_.container {width: 160px;height: 91px;}

.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left top;
  background-size: auto;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}

@-webkit-keyframes displace {
  from { background-position: 0px top; }
  to   { background-position: 200px top; }
}

@keyframes displace {
  from { background-position: 0px top; }
  to   { background-position: 200px top; }
}_
_<div class="container"><textarea class="bg"></textarea></div>_
2
tavnab
.container {
  border: 1px solid black;
  display: inline-block;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
  background-size: 160px 100%;
}

.bg {
  float: left;
  border: 0;
  margin: 10px;
  width: 160px;
  height: 91px;
  background-color: rgba(255, 255, 255, .5);
}

@-webkit-keyframes displace {

  from {
    background-position: 0 center;
  }

  to {
    background-position: 160px center;
  }

}

@keyframes displace {

  from {
    background-position: 0 center;
  }

  to {
    background-position: 160px center;
  }

}
<div class="container">
  <textarea class="bg"></textarea>
</div>
1
wolfhammer