我正在尝试寻找这个的替代方案:
"transition:background-image 1s whatever"
在火狐浏览器上,因为它只适用于Webkit浏览器。
我已经尝试了透明度的替代方案,但对我来说不是一个选项,因为我在背景容器中有内容,如果使用透明度,内容将随着背景一起消失。
谢谢。
我正在尝试寻找这个的替代方案:
"transition:background-image 1s whatever"
在火狐浏览器上,因为它只适用于Webkit浏览器。
我已经尝试了透明度的替代方案,但对我来说不是一个选项,因为我在背景容器中有内容,如果使用透明度,内容将随着背景一起消失。
谢谢。
您可以使用两个伪元素来完成这个操作
CSS
.test
{
width: 400px;
height: 150px;
position: relative;
border: 1px solid green;
}
.test:before, .test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 1;
}
.test:before {
background-color: red;
z-index: 1;
transition: opacity 1s;
}
.test:after {
background-color: green;
}
.test:hover:before {
opacity: 0;
}
(鼠标悬停进行过渡效果)
为了能够看到div内容,伪元素需要具有负的z-index:
看起来IE不会触发这个hover效果
.test:hover:before {
opacity: 0;
}
但将触发此项
.test:hover {
}
.test:hover:before {
opacity: 0;
}
< p >(尽管看起来很傻)
< p > 适用于IE10的代码示例
.self-pic {
height: 350px;
width: 350px;
position: relative;
border-radius: 1rem;
}
img {
position: absolute;
left: 0;
transition: opacity, 1s;
}
img.front:hover {
opacity: 0;
}
<div id="self-pic">
<img class="back" src="https://source.unsplash.com/random/350*350" />
<img class="front" src="https://source.unsplash.com/random/351*351" />
</div>
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
这样行不通吗?只需要将所有内容更改为背景图片。