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)
上一篇 2022年5月9日 上午10:00
下一篇 2022年5月9日 上午10:00


相关推荐

  • 《Cocos Creator游戏实战》实现微信小游戏排行榜

    《Cocos Creator游戏实战》实现微信小游戏排行榜实现微信小游戏排行榜在游戏中加入排行榜是非常有必要的 本节教程就带大家了解下如何在微信小游戏中加入排行榜 运行效果如下 CocosCreator 版本 2 2 0 后台回复 排行榜 获取该项目完整文件 其实 Cocos 官方文档已经提供了较为详细的说明 并提供了一个 Demo 大家可以先去了解下 请大家点击该链接查看微信开放数据域各个 API 的用法

    2026年3月20日
    4
  • Ctrl + K快捷键,允许您在编辑器窗口中生成新代码或编辑现有代码:

    Ctrl + K快捷键,允许您在编辑器窗口中生成新代码或编辑现有代码:

    2026年3月16日
    3
  • ajax的实现_JavaScript高级教程

    ajax的实现_JavaScript高级教程点击这里下载PDF文件。  点击这里下载示例文件。  点击这里下载视频文件。  相关内容:AJAX培训第二讲:使用AJAX框架(下)  首先向大家说声抱歉,离上次隔的时间实在太长。由于一度工作比较忙,所以录制就耽搁了。而且后来在录制过程中也麻烦不断,主要原因是我的笔记本比较差,而录制的内容一多,几乎就会处于“僵死”状态,然后Captivate非常容易崩溃,最后连录制内容都弄坏了。录制结束后怎么发布

    2025年10月29日
    4
  • python连接数据库插入数据「建议收藏」

    python连接数据库插入数据「建议收藏」python连接数据库插入数据在数据库创建表并插入测试数据dropdatabaseifexistshrs;createdatabasehrsdefaultcharsetutf8mb4;usehrs;createtabletb_dept(dnointnotnullcomment’编号’,dnamevarchar(10)notnullcomment’名称’,dlocvarchar(20)notnullcomment’所在地’,prim

    2025年7月12日
    4
  • pip 清华镜像源

    pip 清华镜像源pypi 镜像使用帮助 https mirrors tuna tsinghua edu cn help pypi pypi 镜像每 5 分钟同步一次 临时使用 pipinstall ihttps pypi tuna tsinghua edu cn simplesome package 注意 simple 不能少 是 https 而不是 http 设为默认升

    2026年3月18日
    2
  • Q学习(Q-learning)简单理解「建议收藏」

    Q学习(Q-learning)简单理解「建议收藏」第1节Q-learning逐步教程本教程将通过一个简单但又综合全面的例子来介绍Q-learning算法。该例子描述了一个利用无监督训练来学习未知环境的agent。假设一幢建筑里面有5个房间,房间之间通过门相连。我们将这五个房间按照从0至4进行编号,且建筑的外围可认为是一个大的房间,编号为5。房间结构如下图:上图的房间也可以通过一个图来表示,房间作为图的节点,两个房间若有门相连,则相应节点间对应一条边如图2所示图2房间结构对应的图第2节Q-learning手工推演…

    2022年10月3日
    4

发表回复

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

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