从左到右逐渐覆盖一个图像

Question

是否可以从左到右逐渐覆盖一个图像？ 就像将一个图像加载到另一个图像上一样。 或者您可以想象带有图像而不是线条的进度条。 我希望你理解我。

我尝试了类似下面的方法，但我不想要那种褪色效果，而且它不会从左到右改变颜色（图像）。

 .bgImg { width: 500px; height: 500px; background-image: url(https://s14.postimg.org/unjnz24ld/rkfe2i3pdqqx.jpg); background-repeat: no-repeat; -webkit-transition: background-image 2s linear; -moz-transition: background-image 2s linear; -ms-transition: background-image 2s linear; transition: background-image 2s linear; } .bgImg:hover { background-image: url(https://s14.postimg.org/mi1m10iy9/gre.jpg); }

 <div class="bgImg"></div>

Answer 1

您可以使用渐变颜色作为背景并简单地设置background-size动画，然后在 html 中使用您的文本，而无需在图像中使用它：

 .bgImg { width: 500px; height: 150px; text-align:center; font-size:30px; background: linear-gradient(red,red), yellow; background-size:0% 100%; background-repeat: no-repeat; transition:2s linear; } .bgImg:hover { background-size:100% 100%; }

 <div class="bgImg"> Some text</div>

如果您仍然想使用您的图像，请考虑像这样设置background-position动画：

 .bgImg { width: 500px; height: 500px; background-image: url(https://picsum.photos/id/10/500/500), url(https://picsum.photos/id/15/500/500); background-repeat: no-repeat; background-position:500px 0,0 0; transition: 2s linear; } .bgImg:hover { background-position:0 0,0 0; }

 <div class="bgImg"></div>

或者考虑使用如下伪元素：

 .bgImg { width: 500px; height: 500px; background: url(https://picsum.photos/id/15/500/500) center/cover; position:relative; } .bgImg:before { content:""; position:absolute; top:0; left:100%; right:0; bottom:0; background: url(https://picsum.photos/id/10/500/500) right/auto 100% no-repeat; transition: 2s linear; } .bgImg:hover:before { left:0; }

 <div class="bgImg"></div>