css 情况半全透明最好实践活动

日期:2020-09-24 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

如今有1个要求,必须对1个单色的层完成半全透明实际效果。实际效果以下,边框必须全透明,全透明度为 #000000 的 30%:

用各种各样访问器开启下面这个 DEMO, IE9 有独特显示信息:http://demo.jb51.net/js/2011/transparentbg/

1、应用 opacity + Alpha Filter

看起来手挺简易的吧?嗯。挺简易的… 期待你能很便捷完成这个计划方案!实际上见到这个的情况下,大家的第1念头自然是 background + opacity,在不适用 opacity 的 IE 应用 filter 的 alpha 滤镜来完成。随后,大家获得这样的实际效果:

.opacity{
    background:#000;
    opacity:0.3;
    filter: alpha(opacity=30);
}

无1列外,最外层,最里层和文本,都被设定了 opacity(alpha 也是应用 opacity ) 。自然,大家能够给各层设定 opacity 变回家。但这是多不便的事(不信试1下)。

2、最好实践活动:rgba颜色 + Gradient Filter

实际上大家能够采用 background-color: rgba() 来完成,一样能够完成全透明实际效果,而且只运用于当今元素,不承继。而 IE 的 filter 有许多滤镜实际效果。在其中的渐变色滤镜,要是变通1下,便可以完成大家要想的实际效果,而且这个滤镜不容易被下级元素承继,这样元素的內容就不容易被虚化。编码以下:

拷贝编码
编码以下:

/*
* filter 渐变色滤镜详尽用法,[<a target="_blank" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx">参照这里</a>]
* StartColorStr 和 EndColorStr:
* #4c000000 是 30% 全透明度的 #000000 的意思
* 构成: # + 全透明度 + 色调
* 优化算法: Math.floor(0.6 * 255).toString(16);
*/
.rgba{
background:rgba(0, 0, 0, 0.3);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}

但是,大家获得的实际效果是这样的,IE9 的全透明度居然有 60%!! 这明显并不是大家念头的。缘故是:IE9 也适用 filter,使得 filter 的結果和 background-color 叠加,因此是 60%。实际参照 DEMO 和示例图:

那末大家能够运用 IE 的 HACK,独立把 IE9 的 filter 变为全透明度为 0 便可。高級访问器绝大多数适用 :root 伪类,但不适用 filter 特性,而 IE 仅有 IE9 适用,因此大家能够这样写。编码以下:


拷贝编码
编码以下:

:root .rgba{
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
}

自然,第2种方式能够运用于 background,也可运用于 border 上。总体的编码可参照 DEMO。最终,還是那句话,希望你更好的处理计划方案。

参照参考文献:

  • CSS background transparency without affecting child elements, through RGBa and filters
  • MSDN: Gradient Filter
  • MSDN: Alpha Filter
  • IE9 Only Hack