设为首页 - 加入收藏 温岭网 (http://www.themebuff.com)- 致力于打造温岭最大的资讯信息平台!
热搜: 2017 为何 突然
当前位置: 主页 > 创业 > 正文

凯旋门娱乐手机版

发布时间:2018-10-14 13:09 所属栏目:[创业] 来源:网
导读:1、HTML 元素透明 其实本身,CSS 实现元素透明是件容易事儿。直接上代码: opacity:.5 opacity 指的是不透明度,取值为 0~1 之间,1 表示完全不透明,0 表示完全透明。 A 级浏览器基本都支持 opacity 属性,但碰上 IE,总没好事。不过 IE 有滤镜,可以帮助

1、HTML 元素透明

其实本身,CSS 实现元素透明是件容易事儿。直接上代码:

opacity:.5

opacity 指的是不透明度,取值为 0~1 之间,1 表示完全不透明,0 表示完全透明。

A 级浏览器基本都支持 opacity 属性,但碰上 IE,总没好事。不过 IE 有滤镜,可以帮助我们拐弯抹角地搞定不透明度:

filter:alpha(opacity=50);

注:事实上会碰到透明背景层,而 opacity 属性是会继承的,避免这个问题,需要结合定位来实现。

在 CSS3 中,还可以使用 HSLA(色调、饱和、亮度、透明度)或者 RGBA(红、绿、蓝、透明度)来实现元素透明。例如:

background: hsla(0,100%,50%,0.5);
background: rgba(0,0,0,0.5);

2、背景图片透明

有一个值得关注的问题是,PNG8 格式的图片在 IE6 下仅支持全透明,也就是说,IE6 下使用 PNG8 无法实现背景的半透明效果。透不透明其实有时候无所谓,但问题是全透明状态下,会导致图片出现恶心的毛边。虽然可以在导出 PNG8 时,通过选择杂边颜色或者去除杂边的方式解决,但并不完美。

可喜的是,PNG24 支持全透明,所以 PNG24 就很威猛了,在图片透明的方案中,它绝对是武力指数最高的。

但碰上 IE,另一个恶心的问题又出现了,IE6 不支持支持半透明的 PNG24 透明图片(可能有点拗口)。

咋办?滤镜!

直接上代码:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

但碰上 IE6,又悲剧了。在 CSS 文档和页面地址不一致时(比如很多网站会将静态资源放置于和站点本身不同域的 CDN 服务器上),会导致滤镜引用的图片不可获取。所以一旦资源跨域,必须保证图片地址为绝对路径。

来源:http://www.mangguo.org/

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:[email protected],我们将及时予以处理。

网友评论
推荐文章