CSS背景控制--背景色
背景颜色的设置方法有三种: 颜色的英文单词、 16进制颜色、 rgb颜色。其他常用的背景方法有设置 背景色透明度、 背景的线性渐变、 背景的怪向渐变
1、背景颜色—英文单词
<!DOCTYPE html>
<html>
<head>
<title>背景颜色--英文单词</title>
<style type="text/css">
body{background: red;} ----把body元素拿出来设置背景颜色
</style>
</head>
<body>
</body>
</html>
2、背景颜色—16进制颜色
<!DOCTYPE html>
<html>
<head>
<title>背景颜色--16进制颜色</title>
<style type="text/css">
body{background: #000;} ---这里的#000代表16进制的黑色
</style>
</head>
<body>
</body>
</html>
3、背景颜色—rgb颜色
<!DOCTYPE html>
<html>
<head>
<title>背景颜色--rgb颜色</title>
<style type="text/css">
body{background: rgb(255,182,193);} ---这里是rgb颜色的写法
</style>
</head>
<body>
</body>
</html>
4、背景色的透明度
在css中,设置背景色的透明度只需要通过rgba(R,G,B,A)即可。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。A为透明度参数,取值在0~1之间,不可为负值。
其语法为:background-color:rgba(0,0,0,0.1),实例如下:
<!DOCTYPE html>
<html>
<head>
<title>背景颜色--rgb颜色</title>
<style type="text/css">
body{background: rgba(40,41,35,0.2);} ---这里设置了背景色的透明度
</style>
</head>
<body>
</body>
</html>
5、背景的线性渐变
线性渐变是设置背景色在某一个方向的颜色变化过程,其语法如下
background-color:linear-gradient(方向,起始颜色,终止颜色)
实例如下:
<!DOCTYPE html>
<html>
<head>
<title>背景颜色--rgb颜色</title>
<style type="text/css">
p{height: 30px;background: linear-gradient(to right,red,blue);} ---对p标签设置线性渐变的颜色,从红到蓝,方向为从左到右
</style>
</head>
<body>
<p>I love China</p>
</body>
</html>
6、背景的径向渐变
<!DOCTYPE html>
<html>
<head>
<title>背景颜色--rgb颜色</title>
<style type="text/css">
p{height: 30px;background: radial-gradient(red 20%,#05F5F7);} ---传入起始颜色和终止颜色即可
</style>
</head>
<body>
<p>I love China</p>
</body>
</html>