CSS способ петли фонового изображения с обложкой или содержать размер

Ответ 1

Проблема в том, что, чтобы сделать его отзывчивым, вам нужно установить анимированную фоновую позицию, используя проценты.

Но когда вы устанавливаете фоновый размер в качестве обложки или содержимого, в некоторых случаях ширина устанавливается на 100%. В этом случае фоновая позиция с использованием процентов бесполезна (не будет ее перемещать).

Единственный способ справиться с этим - переместить изображение в псевдоэлемент и переместить его. Чтобы сохранить непрерывность, нам понадобятся два псевдоэлемента.

Но это не сработает в текстовой области.

Вы ничего не сказали о требовании 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>

Ответ 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>

Ответ 3

У вас есть проблема с изменением размера height и различными настройками. Чтобы заставить его работать с вашими фактическими настройками, смещение должно составлять 2x height изображения (поскольку изображение имеет рацион 2: 1). Я не думаю, что вы можете сделать только css.

Но у вас разные варианты. Я не уверен, какую именно часть из них вы хотите сохранить, так что вот три способа заставить ваш перевод работать на resize. У вас нет настроек, потому что те, которые у вас есть, затрудняют (невозможно?), Чтобы установить правильное перемещение. Поскольку вы растягиваете ширину в зависимости от высоты, ее трудно следовать. Через JS это было бы легко, но css имеет ограниченный доступ к этим значениям.

Предлагаемые решения поддерживают постоянную высоту, поэтому вы можете поддерживать постоянное значение вытеснения.

Во-первых, размер фона - это размер контейнера в px.

Второе решение, вы изменяете размер textarea только по оси x.

В-третьих, вы повторяете на оси 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>

Ответ 4

Это похоже на ответ Ilpo, за исключением того, что он не изменяет размер изображения (background-size: auto;). Анимация гладкая во всем, независимо от размера контейнера.

Недостатком является то, что ширина (200 пикселей) изображения должна быть заранее известна.

Поскольку вы сказали, что это невозможно, и поскольку это изображение выглядит разворачиваемым в обоих направлениях, я также повторил его в обоих измерениях. В результате ваш 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>

Ответ 5

Для каждого 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>

Ответ 6

.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>