Question

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

小提琴上的代码=＆gt; 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;
}

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

Answer 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;
}

Answer 2

你总是可以使用jQuery。

  $('.button').css('opacity', 0.275);

具有背景图像的元素的不透明度，例如IE7-IE8中的输入字段

2 个答案: