css - IE7-IE8 の入力フィールドなど、背景画像を持つ要素の不透明度

Question

理論的には可能であるはずですが、これを機能させることができないようです。これを1週間以上試していますが、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;
}

事前にすべての考えと解決策をありがとう。

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);