Есть ли способ использовать CSS, чтобы фоновое изображение действовало как "обложка", но на 120%?

Question

Есть ли способ использовать CSS, чтобы фоновое изображение действовало как "обложка", но на 120%?

Значение CSS background-size: cover растянет изображение, но сохранит его отношение ширины к высоте. Однако он будет растягивать его только до тех пор, пока наименьшая сторона не достигнет 100% той же стороны родительского узла.

/* This is an image of 100px Wide x 50px Tall, so it'll 

   stretch to 100% of the window height and then scale the

   width larger to retain its width-to-height ratio.

 */

body

{

    background-image: url( "/images/test.png" );

    background-size: cover;

    background-position: center;

}

Я хочу что-то, что будет делать обложку, но с некоторым большим процентом, например 130%. (Я буду использовать это в анимации ключевых кадров CSS, чтобы заставить фоновое изображение расти / сжиматься)

Как бы я это сделал?

429 2

html css css3 html5

2 ответов:

Comments

Ничего не найдено.

LGSon · Accepted Answer · 2016-11-28 23:37:50

Используя псевдо-элемент, вы можете достичь чего-то подобного

CSS анимация имеет поддержку браузера на +90%: http://caniuse.com/#feat=css-animation

.bkg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.bkg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://lorempixel.com/500/400/nature/1);
  background-size: cover;
  background-position: center;
  animation: growme 5s forwards;
}
@keyframes growme {
  from {transform: scale(1);}
  to   {transform: scale(1.3);}  
}

<div class="bkg"></div>

Растут и сжимаются

.bkg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.bkg::before {
  content: '';
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  background-image: url(http://lorempixel.com/500/400/nature/1);
  background-size: cover;
  background-position: center;
  animation: shrinkme ease-in-out 10s infinite;
}
@keyframes shrinkme {
  0%   {transform: scale(1);}
  50%  {transform: scale(.72);}  
  100% {transform: scale(1);}
}

<div class="bkg"></div>

Обновление на основе комментария, где некоторые браузеры имеют проблемы с анимацией псевдоэлементов, где вместо них просто используется дочерний элемент.

.bkg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.bkg div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://lorempixel.com/500/400/nature/1);
  background-size: cover;
  background-position: center;
  animation: growme 5s forwards;
}
@keyframes growme {
  from {transform: scale(1);}
  to   {transform: scale(1.3);}  
}

<div class="bkg"><div></div></div>

jjeining · Accepted Answer · 2016-11-28 23:07:11

Я уже делал это раньше, применяя фоновое изображение к элементу psuedo, такому как:: before, который расположен абсолютно, и применяя к нему масштабное преобразование.