0

刚开始涉足 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;
}
4

1 回答 1

0

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：我输入 0.75（AKA 75%），因为我假设这就是您所说的 -25%，但您显然可以输入任何数字。

编辑：要记住的事情：

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

于 2013-06-19T06:14:47.710 回答