0

我似乎无法让这个工作，虽然理论上应该是可能的，我现在已经尝试了一个多星期，但它在 IE7 或 IE8 中不起作用，在 FF、Chrome、Safari 中按预期工作...

小提琴上的代码 => http://jsfiddle.net/xqQ7r/4/

HTML：

<div style="margin: 50px 0px 0px 250px;">
    <input type="button" class="button" value="test button" />
</div>

CSS：

.button {
    position: relative;
    background-image: url('http://i.imgur.com/mxCABKj.png');
    background-repeat: repeat-x;
    background-position: left top;
    height: 33px;
    line-height: 31px;
    min-width: 100px;
    color: #ffffff;
    font-size: 12px;
    padding-right: 9px;
    padding-left: 9px;
    padding-bottom: 4px;
    font-weight: bold;
    /* text shadow */
    text-shadow: 0px 1px 0px #4f4f4f;
    /* borders */
    border-radius: 3px;
    border: 1px solid #333333;
    box-shadow: 0px 0px 4px 0px #4f4f4f;
    opacity: .75;
    /* Standards Compliant Browsers */
    filter: alpha(opacity=75);
    /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

.button:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    cursor: pointer;
}

提前感谢所有想法和解决方案。

4

2 回答 2

1

实际上，它正在工作。

我在这里修改了您的代码的修改版本http://jsfiddle.net/xqQ7r/8/

我刚刚将按钮的不透明度修改为 0.25，将背景颜色修改为红色，这样您就可以看到效果了。

.button {
    background-color:red;
    opacity: 0.275;
}

这是用于不透明度的跨浏览器 .css

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}
于 2013-02-21T16:56:09.837 回答
-1

你总是可以使用 jQuery。

  $('.button').css('opacity', 0.275);
于 2013-02-21T17:07:16.097 回答