我需要缩放或缩小图像以填充其容器,但是,我需要它平滑地完成并且不显示黄色背景。有没有办法像这样缩小而不显示背景?如果我将关键帧比例从 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);
}
}
最佳答案
你有两个选择,一个是让背景本身缩小,我不推荐,因为它会使缩放图像奇怪地移动。
另一种选择是像这样简单地使背景透明。
.bg-contain{
...
background: rgba(255,255,0,0);
...
}
这使用 rgba(红、绿、蓝、alpha)颜色系统。 0-255 的前三个数字定义了红色、绿色和蓝色级别。最后一个定义了 0-1 的不透明度。我选择的颜色是黄色,但完全透明。
关于css - 缩小(缩放)图像以适合 parent 而不显示背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48552100/