CSS 图像透明度opacity兼容性介绍
前端  /  管理员 发布于 7年前   219
以前的兼容
复制代码代码如下:
<span class="class">.transparent_class</span> <span class="rules">{
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">-ms-filter</span>:<span class="value"><span class="string" style="color:rgb(42,161,152)">"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* ie8 */</span>
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">filter</span>:<span class="value"><span class="function">alpha(opacity=<span class="number" style="color:rgb(42,161,152)">50</span>)</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* ie5-7 */</span>
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">-moz-opacity</span>:<span class="value"><span class="number" style="color:rgb(42,161,152)">0.5</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* old mozilla browser like netscape */</span>
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">-khtml-opacity</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0.5</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* for really really old safari */</span>
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">opacity</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0.5</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* css standard, currently it works in most modern browsers like firefox, */</span>
<span class="rule">}</span></span>
现在的兼容
复制代码代码如下:
<span class="class">.transparent_class</span> <span class="rules">{
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">-ms-filter</span>:<span class="value"><span class="string" style="color:rgb(42,161,152)">"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* ie8 */</span>
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">filter</span>:<span class="value"><span class="function">alpha(opacity=<span class="number" style="color:rgb(42,161,152)">50</span>)</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* ie5-7 */</span>
<span class="rule"><span class="attribute" style="color:rgb(181,137,0)">opacity</span>:<span class="value"> <span class="number" style="color:rgb(42,161,152)">0.5</span>;</span></span> <span class="comment" style="margin-bottom:0px!important; display:inline!important; vertical-align:top; color:rgb(88,110,117); font-style:italic">/* css standard, currently it works in most modern browsers */</span>
<span class="rule">}</span></span>
复制代码代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<h1>图像透明度</h1>
<img src="https:i/tulip_peach_blossom_w_s.jpg" alt="Peach Blossom" />
<p><b>注释:</b>在 IE 中,必须添加 <!DOCTYPE>,这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p>
</body>
</html>
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号