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中使用您的文字，而无需在图片中使用它：

＆＃13;

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

＆＃13;

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

＆＃13;

如果你想仍然使用你的图像，可以考虑像这样动画background-position：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: