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

刚刚开始HTML和CSS设计，但我尝试使用webkit动画时由于缺乏chromes方面的合作而受阻

Iv'e尽了最大努力确保所有内容的格式都正确，但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>-->

---

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);
}

附言：我写了.75（又名75%），因为我假设这就是你所说的-25%，但你显然可以写任何数字

编辑： 要记住的是：

据我所知，大多数浏览器不支持CSS3过滤器（Firefox、IE、Opera不支持）。

---

查看此链接了解更多信息：

其他浏览器不显示黑框，因为它们不支持CSS3过滤器！基于上面的代码，黑盒是正确的输出。我的解决方案有帮助吗？如果有，请将其标记为答案。

.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);
}