Question

有没有办法在div背景更改期间平滑过渡？理想情况下，我想在css中执行此操作，而不是使用任何js。

在我的CSS中我有：

.examplediv {
   background: url(img_img.png);
}

.examplediv:hover{
   background: url(brighter_img.png);
}

它正在做我想做的事（改变图片），但是如果有办法让两个背景“溶解”在一起，我会开始感激地在嘴里发泡。

注意：我想要的效果本质上是一个不透明度的变化，所以如果使用：opacity更容易编码一个溶解，我全都耳朵！

坦克！〜

Answer 1

使用CSS肯定是可能的。请参阅此小提琴以获取示例：https://jsfiddle.net/ffqdmcws/

HTML：

<div class="crossfade">
  <div class="static"></div>
  <div class="hover"></div>
</div>

CSS：

.crossfade {
  position: relative;
  width: 300px;
  height: 200px;
}

.static, .hover {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease;
}

.static {
  background: url('http://lorempixel.com/300/200/food');
  opacity: 1;
}

.hover {
  background: url('http://lorempixel.com/300/200/cats');
  opacity: 0;
}

.crossfade:hover > .static {
  opacity: 0;
}

.crossfade:hover > .hover {
  opacity: 1;
}

在这种情况下，我使用crossfade类以及其中的几个其他div使用类static和hover来获取容器div。

static类包含最初显示的背景，hover类包含悬停时淡入淡出的背景。 static类的初始不透明度为1，hover类的初始不透明度为0，因此您只能看到带有static类的div。

然后，如果您使用.crossfade:hover将悬停操作挂钩到容器div上，则为opacity: 0;设置static，为opacity: 1;设置hover ，当您将鼠标悬停在容器div上时隐藏static并显示hover。

最后，为了使背景重叠，使用两个内部div的absolute定位，使它们始终在彼此之上。此外，对于真正的交叉渐变效果，您需要transition: opacity 1s ease;规则，该规则表示您希望不透明度在1秒的时间内转换，而不是立即切换。将不透明度从1-> 0和0-> 1改变的div都给出了背景图像的交叉渐变效果。

Answer 2

您可以使用绝对定位的伪元素。一个是默认可见，另一个是悬停。

＆＃13;

.examplediv {
  height: 600px;
  position: relative;
}

.examplediv:before, .examplediv:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  transition: opacity 0.5s ease-out;
}

.examplediv:before {
  background: url(https://pixabay.com/static/uploads/photo/2015/07/19/17/38/flower-851725_960_720.jpg)
}

.examplediv:after {
  background: url(https://pixabay.com/static/uploads/photo/2015/12/07/23/56/pink-flower-1081646_960_720.jpg);
  opacity: 0;
}

.examplediv:hover:before {
  opacity: 0;
}

.examplediv:hover:after {
  opacity: 1;
}

＆＃13;

<div class="examplediv">

</div>

＆＃13;

JSFIDDLE

交叉渐变div背景：悬停 - 可能在CSS？

2 个答案: