0

我已经申请：

-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/

然而，与网站上的所有其他图像不同，它们会自然褪色，然后在悬停时增加它们的黑暗，这一张拒绝让步。

有人可以解释我哪里出错了吗？

4

1 回答 1

0

用以下代码替换你的“关于”背景：

记得从 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>
于 2013-09-05T14:02:15.373 回答