IE8中锚链接和css透明的背景图片答案

【问题标题】：Background image for anchor link and css transparent in IE8IE8中锚链接和css透明的背景图片
【发布时间】：2014-04-19 19:08:13
【问题描述】：

HTML 代码

<div class="thumbnail-wrapper">
    <a tabindex="-1" class="thumbnail select" style="background-image: url(http://localhost/RP/assets/images/hero/01.jpg); width: 157px; height: 87px;" data-index="0">
        <div class="caption" style="bottom: 0px;">Sport's live FA Cup games revealed</div>
    </a>
    <span class="pointer" style="display: inline;"></span>
    <a tabindex="-1" class="gal-type"></a>
</div>

IE CSS

.thumbnail-wrapper .thumbnail.select {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    zoom:1;
    display: inline-block;
    position:absolute ; // this is not needed but I gave at least this could help
}

我已经给出了几个过滤器属性，但是没有运气。

【问题讨论】：

stackoverflow.com/questions/1948176/…
@NicoO 运气不好，我检查了这个。
我认为您的定义顺序有问题。您覆盖自己的过滤器。尝试准确复制其中一个得分高的答案。
-ms-filter 不应在filter 之后，始终将特定浏览器放在标准之前。

标签： html css internet-explorer-8 opacity

【解决方案1】：

在锚链接内添加图像叠加层。像这样的

HTML 代码

<div class="thumbnail-wrapper">
    <a tabindex="-1" class="thumbnail select" style="width: 157px; height: 87px;" data-index="0">
        <div class="overlay"></div>
        <div class="caption" style="bottom: 0px;">Sport's live FA Cup games revealed</div>
    </a>
    <span class="pointer" style="display: inline;"></span>
    <a tabindex="-1" class="gal-type"></a>
</div>

IE CSS

.thumbnail-wrapper .thumbnail.select {
    display: inline-block;
    position:relative;
}

.thumbnail-wrapper .thumbnail.select .overlay {
    background : url(http://localhost/RP/assets/images/hero/01.jpg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    position:absolute;
    top:0;
    left:0;
    width:157px;
    height:87px;
}

【讨论】：

【解决方案2】：

目标样式仅适用于 IE，在任何属性前使用星号 *。

*filter: alpha(opacity=70);

使该属性不与其他属性冲突。

【讨论】：