opacity属性的应用

opacity属性的应用opacity是CSS中很有意思的属性,类似于Photoshop中不透明度的更改,结合绝对定位能实现很多漂亮的效果。opacity取值范围为0-1,若实现对IE浏览器的兼容,一般写为filter: alpha(opacity=XX);

大家好,又见面了,我是你们的朋友全栈君。

        opacity是CSS中很有意思的属性,类似于Photoshop中不透明度的更改,结合绝对定位能实现很多漂亮的效果。

        opacity取值范围为0-1,若实现对IE8 以及更早的版本的兼容,一般写为filter: alpha(opacity=XX);当然其他geek会有更强大的写法,本文不再赘述。

    从网页设计的角度来讲,制作半透明效果有以下几个方法:

    一是采用绝对定位,把半透明图层覆盖到原图层上。这是使用最多的方法,用于轮播图,或者图片说明文字的底色。半透明的图层加上js代码即可实现透明到不透明的渐变,以及图层的移动。

    二是使用半透明的png图像,覆盖到原图层上。这种方法的好处是能够形成半透明的纹理,做出特殊的半透明效果。

    三是使用多个半透明图层的叠加。类似于photoshop图层叠加的效果,这种方法的好处是结合js实现简单的动画,增强图片的吸引力。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/141209.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号