CSS 图像透明度opacity兼容性介绍

前端技术 2023/09/09 CSS
以前的兼容

复制代码
代码如下:

<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=\"/i/tulip_peach_blossom_w_s.jpg\" alt=\"Peach Blossom\" />
<p><b>注释：</b>在 IE 中，必须添加 <!DOCTYPE>，这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p>
</body>
</html>

本文地址：https://www.stayed.cn/item/25433

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案