CSS3动画可在除Chrome之外的所有浏览器中使用

Question

刚开始进入HTML和CSS设计，但是由于在Chrome方面缺乏合作，我尝试使用Webkit动画的尝试受到了阻碍。

我已尽力确保一切格式正确，但是chrome仍然顽固地显示黑框代替了我正在使用的图像。

在这里www.wesleymartin.ca，只是一个个人练习网站，有关图像位于底部。 所需的效果（将鼠标悬停在上面时会逐渐消失）在除chrome之外的所有浏览器中均有效。

这是HTML代码。

<table id="linkbar" border="0">
<th>
        <div class="brighten pic">
          <a href="https://www.facebook.com/wesley.martin.58">
          <img id ="linkpic" src="Link Pics/facebook.jpg" alt="sea">
          </a>
        </div>
        <div class="brighten pic" style= "margin-left: 0px;>
          <a href="https://twitter.com/WesMartin10">
          <img id ="linkpic" src="Link Pics/twitter.png" alt="sea" >
          <style>margin-left: 0px:</style>
          </a>
        </div>
        <div class="brighten pic">
          <a href="http://www.linkedin.com/pub/wesley-martin/74/232/a3">
          <img id ="linkpic" src="Link Pics/linkedin.jpg" alt="sea">
          </a>
        </div>
</th>
</table>
<!--</div>-->

还有CSS。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

body {
    background-image:url(background.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:right; 
    background-color: #996633;
}

.pic {
    border: 3px solid #999;  
    float: left;
    height: 75px;
    width: 75px;
    margin: 20px;
    overflow: hidden;
}

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(0);
     -moz-filter: brightness(0);
       -o-filter: brightness(0);
      -ms-filter: brightness(0);
          filter: brightness(0);

  -webkit-transition: all .1s ease;
     -moz-transition: all .1s ease;
       -o-transition: all .1s ease;
      -ms-transition: all .1s ease;
          transition: all .1s ease;
}

.brighten img:hover {
  -webkit-filter: brightness(-25%);
     -moz-filter: brightness(-25%);
       -o-filter: brightness(-25%);
      -ms-filter: brightness(-25%);
          filter: brightness(-25%);
}

#linkbar {      
    width: 358px; 
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left:-179px;
    background:#330000;
    border: 3px solid #999;
}

#linkpic {
    height:69px;        
}

#test {
    background:#330000;
    height: 400px;
    width:400px;
}

Answer 1

CSS3滤镜：应将亮度指定为介于0和1之间的值，其中0是最暗的（黑色），而1是最亮的。

您会看到黑匣子，因为亮度0表示亮度为0％。

您想要的是：

.brighten img {
  -webkit-filter: brightness(1);
     -moz-filter: brightness(1);
       -o-filter: brightness(1);
      -ms-filter: brightness(1);
          filter: brightness(1);
}

.brighten img:hover {
  -webkit-filter: brightness(.75);
     -moz-filter: brightness(.75);
       -o-filter: brightness(.75);
      -ms-filter: brightness(.75);
          filter: brightness(.75);
}

PS：我输入了.75（AKA 75％），因为我假设这就是您所说的-25％，但您可以输入任何数字。

编辑：要记住的事情：

据我了解，大多数浏览器不支持CSS3过滤器（Firefox，IE，Opera不支持）。 查看此链接以获取更多信息： http : //css3.bradshawenterprises.com/filters/