Question

刚开始使用HTML和CSS设计，但我在使用webkit动画时的尝试因为在chromes部分缺乏合作而受到阻碍。

我尽力确保所有内容都已正确格式化，但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/

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

1 个答案: