0

我正在尝试制作一个 CSS3 按钮。

问题：当我将鼠标悬停在按钮上时，按钮底部会出现一个白色的东西。我将这个问题缩小到background-position: 0 -15px;CSS 属性，但是如何调整它以使鼠标悬停的渐变变化但避免出现白色的东西？谢谢！

JSfiddle：http: //jsfiddle.net/7LT35/

4

3 回答 3

1

“白色的东西”只是按钮的背景颜色。

渐变图像是按钮的确切大小。所以如果你移动它，它当然不会再覆盖按钮了。

就个人而言，我建议只制作一个渐变图像并用它做你想做的事情。

PS。请不要使用 IE 的“hacks”和过滤器属性，除非您实际测试它们以确保它们按照您的意图执行。

于 2012-06-22T14:23:24.490 回答
1

你必须改变background-size价值！插入到 .btn 这个：

  background-size:1px 53px;

并调整你的渐变！比它（希望）会起作用！这是一个结果： http: //jsfiddle.net/7LT35/6/ 但我认为这不是正确的渐变！

于 2012-06-22T14:31:14.370 回答
0

白色的东西是你的背景渐变。您告诉元素在悬停时仅向上移动 15px。

您还应该将过渡放在静态类而不是悬停伪元素上。

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  ..more styles

  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
      -ms-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn:hover {
  color: #333333;
  text-decoration: none;

 background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);

}

这使得白色/灰色渐变出现在悬停时。不确定您想对转换做什么。

看看小提琴

于 2012-06-22T15:10:28.420 回答