交叉淡入div背景：悬停 - 可能在CSS？

在div背景更改期间是否有平滑过渡的方法？理想情况下，我想在CSS中做到这一点，而不是使用任何JS。交叉淡入div背景：悬停 - 可能在CSS？

在我的CSS，我有：

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

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

它在做什么，我想它做的（改变图片）什么，但如果有一种方法，使这两个背景“溶解”到彼此，我会开始用感激的嘴巴开始发泡。

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

坦克！〜

来源

2016-04-21 Babs Derek

这绝对有可能只使用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容器，和一对夫妇的其他里面的div，使用类static和hover。

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

然后，如果你连上使用.crossfade:hover容器div的，悬停动作，以便设置opacity: 0;为static和opacity: 1;为hover，隐藏static，并显示hover，当你将鼠标悬停在div容器。

最后，为了使背景重叠，使用absolute定位两个内部div，所以它们在任何时候都处于彼此之上。此外，对于真正的淡入淡出效果，您需要transition: opacity 1s ease;规则，该规则说明您希望不透明度在1秒内过渡，而不是立即切换。从1-> 0和0-> 1不透明度的div都会给你背景图像的淡入淡出效果。

来源

2016-04-21 17:45:31

你可以用绝对定位的伪元素来做到这一点。默认情况下会显示一个，悬停时显示另一个。

.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; 
 
}

<div class="examplediv"> 
 

 
</div>

JSFIDDLE

来源

2016-04-21 18:07:11 Julia

交叉淡入div背景：悬停 - 可能在CSS？

回答

相关问题