文章关键字 ‘opacity’

快速学习CSS Color Level 4的色值新语法

2020年10月11日,星期日

多彩颜色表示

本文介绍#RRGGBBAA色值表示法,对应的透明度的16进制色值,RGB颜色和HSL颜色语法以前的限制都取消了,支持小数,参数个数3个4个都可以,以及介绍RGB颜色和HSL颜色的新语法,希望本文内容对大家的学习有所帮助。

阅读全文…

巧用CSS cross-fade()实现背景图像半透明效果

2020年07月6日,星期一

cross-fade背景图透明度降低

虽然CSS新特性非常多,但所有这些新特性,没有任何特性可以实现元素的背景图像半透明,但是元素中的文字内容依然不透明的效果,除了一个例外,那就是cross-fade()图像函数。

阅读全文…

第五届CSS大会主题分享之CSS创意与视觉表现

2019年06月9日,星期日

第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理,共有10个纯CSS实现的创意案例,旨在展现CSS的潜力,同时激发你的CSS创意思维。每个案例都有demo,原理讲解,文末还有分享文档,希望对你CSS学习有所帮助。

阅读全文…

CSS前景背景自动配色技术简介

2018年11月18日,星期日

智能配色

CSS越来越强,现在已经可以实现根据不同的背景色显示不同的前景色进行匹配了,例如右图GIF图片所示,背景色一开始深色,文字颜色为白色,当背景色逐渐变淡的时候,文字颜色也从原来的白色变成黑色了,同时边框也显示出来了,以便有更好的识别度。如何实现的呢?去文中一探究竟吧~

阅读全文…

几种CSS渐变背景图片transtion动画方法

2018年03月25日,星期日

background-image不支持CSS3 transition,因此,当CSS3 gradient渐变作为背景图片存在的时候,直接设置transition是不会有过渡效果的,那该怎么办呢?

阅读全文…

Chrome opacity非1时border-radius圆角边框剪裁问题

2017年10月19日,星期四

border-radius:50%可以让元素正方形元素表现为正圆,如果元素设置了border边框,则会表现为一个正圆圈圈,但有时候,border边框的这个圈圈会在边缘处发生剪裁,不是一个完美的圈圈了,这是如何发生的呢?

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日,星期日

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

jquery.guide.js新版上线操作向导镂空提示jQuery插件

2017年05月18日,星期四

网站上线或者改版的时候,常常会做一个操作向导,告诉用户一些重要操作到了哪里,或者什么地方隐藏了什么好玩的东西,等等,虽然我都是直接关掉的,或者快速跳过,但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩,视觉重点一目了然,类似这样……

阅读全文…

深入理解CSS中的层叠上下文和层叠顺序

2016年01月9日,星期六

本文是最近1-2个月最用心的文章,理解本文内容,就会明白网页中元素层叠的时候为什么会这样表现了,相信本文的内容一定会对您的学习有所帮助的。

阅读全文…

border-collapse与table td边框opacity透明度诡异解析

2015年03月3日,星期二

年前遇到此现象,在Chrome浏览器下,起初,我还以为是Chrome浏览器的bug.
今日原型重现,在各个现代浏览器下一测,乖乖隆地咚,都是一个尿性,看来是规范使然,不是bug啊!但是,由于现象实在诡异,到目前也想不通是个怎么回事,故在这里演示并询问在座的小伙伴们,为什么会有此现象?
现象描述……

阅读全文…