Question

我需要缩放或缩小图像以填充其容器，但是，我需要它才能顺利完成并且不显示黄色背景。有没有办法像这样缩小而不显示背景？如果我将关键帧的比例从1 @ 0％设置为1.05 @ 100％，我可以做到这一点，但它会将图像放大太多。

这是我的fiddle。

<div class="bg-contain">
  <div style="background-image:url(https://www.walldevil.com/wallpapers/a68/back-ground-background-sample-cluster.jpg);" class="bg"></div>
</div>

.bg-contain {
   width: 600px;
   height: 600px;
   overflow: hidden;
   background: yellow;
   position: relative;
   display: table;
   overflow: hidden;
}

.bg-contain div {
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.bg-contain div:hover {
   animation: zoomout 1s forwards;
}

@keyframes zoomout {
   0% {
     opacity: 0;
     transform: scale(0.93, 0.93);
   }
100% {
     opacity: 1;
     transform: scale(1, 1);
   }
}

Answer 1

你有两个选择，一个是让背景本身缩小，我不建议这样做，因为它会使变焦图像奇怪地移动。

另一种选择是简单地使背景透明。

.bg-contain{
...
background: rgba(255,255,0,0);
...
}

这使用rgba（红色，绿色，蓝色，alpha）颜色系统。 0-255中的前三个数字定义了红色，绿色和蓝色等级。最后一个定义0-1的不透明度。我选择的颜色是黄色，但完全透明。

Modified fiddle

缩小（缩放）图像以适合父级而不显示背景

1 个答案: