html - CSS3 动画适用于除 Chrome 之外的所有浏览器

Question

刚开始接触 HTML 和 CSS 设计，但我使用 webkit 动画的尝试因 chrome 方面缺乏合作而受阻。

我已尽最大努力确保所有内容的格式都正确，但 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(又名 75%)是因为我假设这就是你所说的 -25%，但显然你可以输入任何数字。

编辑: 需要注意的事项:

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