html 图像覆盖图像,HTML – 有没有办法使用CSS使背景图像像“覆盖”,但在120％？...

通过使用伪元素,您可以实现类似的功能

.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);}

}

成长和收缩

.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);}

}

基于注释进行更新,其中一些浏览器具有动画伪元素的问题,其中一个简单地使用子元素.

.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);}

}