CSS技巧-rgba函数的妙用
先简单介绍一下:
rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用。
对它的工作原理做一番分析:就是具有一定透明度的盒子;
还比较了rgba()函数和不透明度属性(opacity)的区别:使用 opacity,所有子元素都会受到影响;
在实际开发中,有些地方用rgba()函数也更加方便:为网站 header 定制主题、文章标题、按钮、渐变、子元素、调色盘中的深/浅效果、图像效果。
最后也指出使用rgba()需要注意的地方:比如兼容性、颜色对比检查等等。
原文:The Power of the rgba() Color Function in CSS
译文:CSS技巧-rgba函数的妙用 谢于中 译
新出现的 CSS 颜色配置函数是一项非常有意思的功能,它给予我们在浏览器中直接操纵颜色的能力。例如,当鼠标悬停在按钮上时,可以使用color: color(black darkness(50%))改变颜色,而不需要使用 Sass 这类 CSS 预处理器。
但是浏览器现在对这种颜色函数还不支持,我们只能暂时 使用 PostCSS 将其编译成常规的颜色。当然,我们也可以使用 CSS 中的rgba()函数达到类似的效果,下面就让我们看看具体该如何操作。
工作原理
在设计软件中,如果我们分别将具有一定透明度的白色盒子和黑色盒子放在一个较大的蓝色盒子上,它们将分别变成浅蓝色和深蓝色。
这是因为当小盒子的透明度较高时,前景色和背景色将会混在一起。如果我们将背景色从蓝色变成绿色,你能想出结果将会怎样吗?
如你所见,当背景色变成绿色时,小盒子的颜色分别变成了浅绿色和深绿色。同理,我们也可以通过改变前景色的透明度来生成更深或更浅的颜色。现在,就让我们根据这个基本前提,深入研究一些实际例子。
理论结合实际
在上面的例子中,为了保持简洁,我们只改变了不透明度属性(opacity)。其实,在实际设计中,更为普遍的是改变rgba()
的alpha值。如:
.header {
background: rgba(, , , 0.5); /* 不透明度为50%的黑色 */
}
在这里我们用的是背景色(background)而不是透明度(opacity),这是因为如果使用 opacity,那么所有子元素都会受到影响,这是应该避免的。(当 opacity 属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的 opacity 属性值)。相反,如果使用 background 的 alpha 通道的话,就能保证只更改指定的元素。
注意:在下面的 demo 中,为了让表述更简洁,将采用 Sass 中的rgba()函数。如:
.elem {
background: rgba(white, 0.5);
}
这将被编译为:
.elem {
background: rgba(, , , 0.5);
}
为网站 header 定制主题
第一个rgba()
的使用场景是为网站的 header 定制主题。在 Trello 中,使用rgba()
为头部子元素 (logo, search input, buttons) 的背景色赋值:
.search {
background: rgba(, , , 0.5); /* 透明度为50%的白色 */
}
有了这个,我们就可以通过只改变 header 背景的颜色来变换主题,因为具有透明度的子元素颜色也将随之变化。
在我们的例子中,将会采用和 Trello 头部相似的方式,在开发者工具中进行实验。
注意在下面两个 heade r中,子元素的背景色是不同的。通过改变父级元素的背景色,我们可以非常方便的定制 header 主题。
详情图片请点击查看链接
请参阅Ahmad Shadeed (@shadeed) 在 CodePen 中创建的 Header demo。
文章标题
在这个例子中,使用rgba()
将有助于改变下列元素的颜色:
顶部和底部边框
中间包裹元素的背景
类别链接的背景
.parent {
background: #5aaf4c; /* 父级背景 */
box-shadow:
inset 8px rgba(, , , 0.5),
inset -8px rgba(, , , 0.5); /* 顶部和底部边框 */
} .contain {
background: rgba(, , , 0.1);
} .category {
background: rgba(, , , 0.5);
}
例如 Article Header。
按钮
当定制按钮的主题时,可以使用rgba()
来改变 hover 和 focus 按钮时边框和阴影的样式。
.button {
background: #026aa7;
box-shadow: inset -4px rgba(, , , 0.2);
} .button:hover {
box-shadow: inset -4px rgba(, , , 0.6), 8px rgba(, , , 0.5);
} .button:focus {
box-shadow: inset 3px 5px rgba(, , , 0.2);
}
例如 Buttons。
渐变
另一个有用的场景就是给背景设置纯色,然后添加一个带有rgba()
背景色的伪元素,用其生成渐变效果。
.elem {
background: green;
} .elem:before {
content: "";
position: absolute;
left: ;
top: ;
width: %;
height: %;
background: linear-gradient(to right, rgba(, , , 0.2), rgba(, , , 0.7));
}
这种方法也可以帮助我们在只改变背景色的前提下模拟渐变动画效果。
.elem {
/* other styles */
animation: bg 2s ease-out alternate infinite;
} @keyframes bg
to {
background: green;
}
}
请见Ahmad Shadeed (@shadeed) 在 CodePen 中创建的 Gradients。
子元素
如果在 header 中有一个导航列表,我们可以给导航栏添加一个由rgba()
定义的背景色。这可以使导航背景透明,从而与父级元素的背景混合。
请见Ahmad Shadeed (@shadeed) 在 CodePen 中创建的 Sub Element。
这种方法也可以被用于实现 hover 效果:
例如 Hover Effect。
调色盘中的深/浅效果
我们可以使用这种方法来生成调色板中的不同色调,只需要在纯色盒子上覆盖一个具有特定rgba()
颜色的伪元素即可。
例如 Color Palette。
图像效果
如果我们想让一张图片变的更深或者更浅,同样可以使用具有rgba()
背景色的伪元素。
通过使用彩色背景,我们可以产生一个彩色效果。此外,我们还可以使用mix-blend-mode
属性将背景和图片混合,从而得到不同的效果。
在使用mix-blend-mode
之前,请注意检查一下兼容性:
.elem:before {
background: rgba(, , , );
mix-blend-mode: color;
}
如果mix-blend-mode
不被支持,图片将会变成黑色的一块。所以,这种效果最好被作为一种增强方式,而不是作为一种依赖。使用这种方法时,可以使用@support
或者 Modernizr。
@supports (mix-blend-mode: color) {
/* your enhanced styles go there */
}
例如 Images 。
使用CSS变量定制主题
如果给父级元素使用 CSS 变量 (自定义属性),当变量变化时,所有的子元素都会发生变化。例如:
:root {
--brand-color: #026aa7;
} /* Checking for the support of CSS Variables */
@supports (--color: red) {
.elem {
background: var(--brand-color);
}
}
var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"];
var colorOptions = document.querySelectorAll(".option");
var colorLabels = document.querySelectorAll(".option + label"); for (var i = ; i < colorOptions.length; i++) { /* Add an event listener to each radio button */
colorOptions[i].addEventListener('click', changeColor); /* Add a value to each radio button based on colors[] array */
colorOptions[i].value = colors[i]; colorLabels[i].style.background = colors[i];
} function changeColor(e) {
/* calling the root element and set the value of a specific property. In our case: --brand-color */
document.documentElement.style.setProperty('--brand-color', e.target.value);
}
通过将 CSS 变量和rgba()
相结合,我们可以在不给每个元素赋予新颜色的前提下,动态改变布局和颜色。
例如 Header - CSS 变量。
需要考虑的地方
后备颜色
虽然目前浏览器对 CSS 颜色的支持度达到了97.39%,但是对于不支持的浏览器,也需要给出后备手段。
.elem {
background: #fff;
background: rgba(, , , 0.5); /* 不支持rgba的浏览器将会忽略这个命令 */
}
颜色对比检查
我们应确保元素之间的对比度符合可访问性标准,毕竟有时使用rgba()
将得到难以识别的颜色。可以使用像 Lea Verou 的对比度检查工具来帮助确定颜色是否满足可访问性标准。
CSS技巧-rgba函数的妙用的更多相关文章
- 20个很有用的CSS技巧
导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...
- 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- (转) 50个CSS技巧
这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...
- 网页设计师必备的10个CSS技巧
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...
- 10个网页设计师必备的CSS技巧(转)
英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...
- 常用前端布局,CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- sass-RGB颜色函数-RGBA()函数
rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色. 其语法有两种格式: rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来,和未转译的值一 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
- 高阶 CSS 技巧在复杂动效中的应用
最近我在 CodePen 上看到了这样一个有意思的动画: 整个动画效果是在一个标签内,借助了 SVG PATH 实现.其核心在于对渐变(Gradient)的究极利用. 完整的代码你可以看看这里 -- ...
随机推荐
- asp.net js 倒计时总秒数量 和 排序
Edit in JSFiddle JavaScript HTML CSS Result h1 { font-family: "微软雅黑"; font-size: 40px; mar ...
- mysql select 格式化输出
select * from test\G; MySQL的客户端命令行工具,有很多方便使用者的特性,某些方面甚至可以说比Oracle的sqlplus更加人性化.当然从整体来说,还是sqlplus更加方便 ...
- 整数分解 && 质因数分解
输入整数(0-30)分解成所有整数之和.每四行换行一次. 一种方法是通过深度优先枚举出解.通过递归的方式来实现. #include <stdio.h> #include <strin ...
- Centos: 修改 yum安装的mysql路径
1.使用命令service mysqld stop 停止mysql查看mysql数据库的默认路径:/var/lib/mysql使用cp -afir /var/lib/mysql/* /usr/l ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- Java——列表框:JList
import java.awt.Container; import java.awt.GridLayout; import java.awt.event.WindowAdapter; import j ...
- asp+mysql__不同类型用户登录
未防注入//0.0 /***这里代码应用场景为多类用户登录,根据用户选择不同的单选按钮判断用户登录的类型,*从而进行不同的数据表进行判断,用户的用户名和密码是否正确.*/ public partial ...
- js取float型小数点后两位数的方法
四舍五入以下处理结果会四舍五入:' var num =2.446242342; num = num.toFixed(2); // 输出结果为 2.45 不四舍五入以下处理结果不会四舍五入:第一种, ...
- Mini ORM——PetaPoco笔记(转)
记录一下petapoco官网博客的一些要点.这些博客记录了PetaPoco是如何一步步改进的. 目录: Announcing PetaPoco PetaPoco-Improvements PetaPo ...
- Docker Compose to CoreOS
taken from https://docs.docker.com/compose/install/ the only thing is that /usr is read only, but /o ...