Question

我申请了：

-webkit-transition:background-image 0.4s ease-in-out;
background-image: url('http://www.clementinekeithroach.co.uk/wpcontent/uploads/2013/09/about.jpg');
background-position:initial initial;
background-repeat:initial initial;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
clear:both;
color:#DDDDDD;
cursor:pointer;
display:block;
font-size:1.8rem;
height:80px;
line-height:80px;
margin:2em auto 0;
text-align:center;
transition:background-image 0.4s ease-in-out;
width:80px;
}

到关于“约”的图像：

http://www.clementinekeithroach.co.uk/home/

然而，与网站上所有其他图像不同，这些图像会自然消失，然后在盘旋时黑暗中增加，这个图像拒绝让步。

有人可以解释我出错的地方吗？

Answer 1

使用以下代码替换你的“约”背景：

记得从span的css中删除background-image属性。同时从跨度中删除过滤器和不透明度以使其工作。

<span class="sidebar-link">
            <img src="http://www.clementinekeithroach.co.uk/wp-content/uploads/2013/09/about.jpg" id="myimg">

<style>
#myimg{
    height: 100%;
    opacity: 0.6;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    z-index: 1;
}
#myimg:hover{
    height: 100%;
    opacity: 1;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    z-index: 1;
}
</style>
</span>

Webkit-Transition无法处理图像

1 个答案: