CSS 图像透明度opacity兼容性介绍
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
以前的兼容
<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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; color:rgb(88,110,117); font-style:italic">/ old mozilla browser like scape /</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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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>
复制代码
代码如下:<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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; color:rgb(88,110,117); font-style:italic">/ old mozilla browser like scape /</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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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="ment" style="margin-bottom:0px!important; display:inline!important; vertical-align:; 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>
上一篇：hasLayOut与css属性的关系介绍
下一篇：CSS画出各种三角形如等边三角形
长沙网站设计
- 如何进行东阳SEO关键词优化？
- 边坝哪有关键词排名优化：提升你的网站流量与
- 安国百度优化服务：提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化：提升您网站曝光率
- 临沂seo网站排名关键词优化：提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广：提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名：提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO：提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务：提升在线可见性的关键