头闻号

童军

塑料表面处理|中网|数码相机|注塑加工|表面处理

首页 > 新闻中心 > 科技常识:CSS 图像透明度opacity兼容性介绍
科技常识:CSS 图像透明度opacity兼容性介绍
发布时间:2023-02-01 09:52:00        浏览次数:3        返回列表

今天小编跟大家讲解下有关CSS 图像透明度opacity兼容性介绍 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS 图像透明度opacity兼容性介绍 的相关资料,希望小伙伴们看了有所帮助。

以前的兼容 复制代码代码如下: <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"></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"></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"></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"></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"></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"></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"></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"></span> <span class="rule">}</span></span> 复制代码代码如下: <!DOCTYPE html> <html> <head> <style> img { opacity:0.4; filter:alpha(opacity=40); } img:hover { opacity:1.0; filter:alpha(opacity=100); } </style> </head> <body> <h1>图像透明度</h1> <img src="https://www.aidi.net.cn/i/tulip_peach_blossom_w_s.jpg"alt="Peach Blossom"/> <p><b>注释:</b>在 IE 中 必须添加 <!DOCTYPE> 这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p> </body> </html>

来源:爱蒂网