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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • javascript数组去重set方法_js数组去重api

    javascript数组去重set方法_js数组去重apiJavaScript数组去重

    2022年4月20日
    60
  • SpringMVC的简介和工作流程「建议收藏」

    SpringMVC的简介和工作流程「建议收藏」一、简介SpringMVC属于SpringFrameWork的后续产品,已经融合在SpringWebFlow里面。Spring框架提供了构建Web应用程序的全功能MVC模块。SpringMVC是一种web层的mvc框架,用于替代servlet(处理响应请求,获取表单参数,表单验证等)二、工作流程1、用户发送请求至前端控制器DispatcherServlet。…

    2022年6月8日
    40
  • nginx 504 Gateway Time-out[通俗易懂]

    nginx 504 Gateway Time-out[通俗易懂]nginx 504 Gateway Time-out

    2022年4月24日
    51
  • python简单代码编写_python编码规范

    python简单代码编写_python编码规范本书以Python3.7为编程工具,共分8个单元,从易到难,从基础应用到综合实战,详细讲解Python创意编程的方法和思维。本书通过丰富有趣的实例,帮助学生学习编程思维方式,掌握Python编程基础知识,包括Python环境的搭建、Python的认识、顺序结构、选择结构、循环结构、列表、元组与字典、函数、字符串及算法。本书适合对Python编程感兴趣的初高中学生阅读,也适合作为家长和老师指导中学…

    2025年7月25日
    0
  • outsystems

    outsystemsoutsystems从入门到精通-朱家俊的文章-知乎https://zhuanlan.zhihu.com/p/322582052outsystemsoutsystemsoutsystemsoutsystemsoutsystemsoutsystems

    2022年10月22日
    0
  • 矩阵相乘详解

    矩阵相乘详解首先要知道矩阵是怎么相乘的首先,两个矩阵要是想相乘需要满足,第一个矩阵的列数等于第二个矩阵的行数满足的话就可以相乘得到新的矩阵了举个例子嗷:矩阵a:123322212矩阵b:223121a矩阵是3*3(3行3列)的矩阵,b矩阵是3*2(3行2列)的矩阵,满足第一个矩阵的列数等于第二个矩阵的行数。那我们就可以相乘了一个m*n的矩阵和一个…

    2022年6月28日
    26

发表回复

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

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