css - 缩小(缩放)图像以适合 parent 而不显示背景

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