CSS3颜色(rgba，渐变)

最新推荐文章于 2024-08-21 09:04:44 发布

cathy18c

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量2.3k

点赞数

分类专栏： HTML CSS JS

本文链接：https://blog.csdn.net/cathy18c/article/details/100134256

版权

HTML CSS JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一，rgba

rgb我们都知道，r(red) g(green) b(blue) 这三个参数取值范围0-255 rgba是在rgb的基础上增加alpha透明度的参数，a的取值范围0-1之间不可为负数

//把文字的背景设置为透明度为  0.5的白色

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>RGBA colors</title>
<style type="text/css">
body{background:red}
p{
    font-size:42px;
    text-align:center;
    font-weight:bold;
    background-color:rgba(255,255,255,.5); /*重点看这里*/
} 
</style>
</head> 
<body>
<p>背景半透明的？</p>
</body>
</html>

如果把参数a去掉就是这样的：

和普通的rgb一样了

二，渐变颜色

CSS3 Gradient 分为 linear线性渐变和 radial径向渐变

以线性渐变为例：

参数：

第一个参数：为渐变方向，可以用角度或英文表示

第一个参数省略时，默认为to bottom 也就是180deg

第二个和第三个参数表示颜色的起始点，可以是多个

例如为文字段落添加从右下角到左上角的线性渐变背景

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">

p {
  width: 400px;
  height: 150px;
  line-height: 150px;
  text-align:center;
  color: #000;
  font-size:24px;
  background-image:linear-gradient(to top left, red, orange,yellow,green,blue,indigo,violet);
} 
</style>
</head> 
<body>
　　<p>右下角向左上角的线性渐变背景</p>
</body>
</html>