http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 6097|回复: 5
打印 上一主题 下一主题

[零基础学习web前端] 【前端丨学习笔记】设置不透明度的几种方法

[复制链接]
跳转到指定楼层
楼主
发表于 2018-12-23 21:21:02 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
【前端丨习笔记】设置元素不透明度的几种方法

【零基础学习web前端】教程目录导航


设置元素的不透明度有多种方法,下面是一些常用方法的总结,希望对大家有用。

方法1:opacity
opacity是除了IE浏览器外,所有浏览器都支持的。
opacity的属性值可以精确到小数点后两位,如.01,.23。一般情况下,精确到一位就可以了。
opacity的值越小越接近透明
IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)。
[CSS] 纯文本查看 复制代码
background-color:red;
opacity:.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */

方法2:JQuery改变元素的透明度
这个方法所有浏览器都兼容
[JavaScript] 纯文本查看 复制代码
$(“#demo”).css({opacity:.4})

上述语法是设置一个元素为40%不透明(或60%透明)。
总结:设置opacity:1是将使元素不透明,而设置opacity:0将使得元素完全不可见。
所以要记住“opacity”等同于“不透明”就很容易记住了,opacity值越小就越接近透明。
您也可以使用一下jQuery代码使一个元素动画透明
[JavaScript] 纯文本查看 复制代码
$(“#myElement”).animate({      opacity: .4      }, 1000, function() {     
// 动画完成,所有浏览器下有效  });  

不管元素的透明度在动画开始时是多少,它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定,动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数,将在动画完成后执行。
方法3:通过RGBA设置透明度
通过RGBA设置透明度,只有最新的浏览器支持,可通过RGBA的alpha通道的方式设定。
前三个值是rgb的颜色值,最后一个透明度的值,这个alpha设置跟opacity 属性一样,可以精确到小数点后两位,值越大,越不透明
[CSS] 纯文本查看 复制代码
#rgba{background:rgba(98,135,167,.4);} 

方法4:通过HSLA设置透明度
HSLA表示Hue(色调), Saturation(饱和度), Lightness(亮度), 和Alpha。
[CSS] 纯文本查看 复制代码
#hsla { background: hsla(207, 38%, 47%, .4);  } 

如同RGBA透明度,最后的数字表示透明度设置,跟RGBA起同样的作用。

注意:RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的,但通过opacity属性的方式则会。
alpha设置的RGBA和HSLA只影响背景颜色的透明度。









1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
沙发
发表于 2018-12-23 21:51:50 | 只看该作者
看到这帖子真是高兴!
板凳
发表于 2018-12-23 23:22:21 | 只看该作者
强烈支持楼主ing……
地板
发表于 2018-12-24 10:14:53 | 只看该作者
我只是路过打酱油的。
5
发表于 2018-12-25 09:42:11 | 只看该作者
楼主加油,我们都看好你哦。
6
发表于 2018-12-25 17:18:57 | 只看该作者
看到这帖子真是高兴!
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-25 16:48

© 2014-2021

快速回复 返回顶部 返回列表