Question

文字淡出，但左边的图像是即时的，并且不会与文字同时淡出广告。如何让所有浏览器同时淡入淡出？它似乎在chrome中工作正常，但在Firefox或Safari中却没有。

我对最近发生的事情感到有些困惑，但继续我的HTML：

<ul class="action">
    <li><a class="visit-site" href="http://google.com">Visit Site</a></li>
    <li><a class="back-to-top" href="#portfolio">Back to top</a></li>
</ul>

这是css：

ul.action a.visit-site {
background: transparent url('../images/arrow-small-right-rest.png') no-repeat 0 2px;
padding-left: 18px;
color: #57585a;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
transition: 0.5s all ease;
-o-transition-duration: 0.5s all ease;
}

ul.action a.visit-site:hover { 
background: transparent url('../images/arrow-small-right-over.png') no-repeat 0 2px;
color: #3ee1df; 
}

使用Sprite：

    ul.action a.back-to-top{
background: transparent url('../images/sprite.png') no-repeat 0 2px;
padding-left: 18px;
width: 13px;
height: 13px;
color: #57585a;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

ul.action a.back-to-top:hover{ 
background-position: 0 -63px;
color: #3ee1df; 
}

Answer 1

如果你在整体设计和开发中使用类似jQuery的东西，你可以“动画”整个UL元素的“不透明度”，这应该创造你想要的过渡。

但是所有浏览器都不支持不透明度，而旧的浏览器则不支持。有交叉浏览器解决方案，但总的来说你想调整不透明度以创建透明效果

为什么文本会消失而不是图像？

1 个答案: