[英]Background image for anchor link and css transparent in IE8
HTML code 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 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
}
I have given several filter properties, But no luck. 我给出了几个过滤器属性,但是没有运气。
Add image overlay inside the anchore link. 在锚点链接内添加图像叠加层。 Something like this
像这样
HTML code 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 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;
}
target styling only for IE using asterisk * before any attribute. 仅在任何属性之前使用星号*的IE的目标样式。
*filter: alpha(opacity=70);
So that the attribute doesn't conflict with other attributes. 这样该属性不会与其他属性冲突。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.