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>

猜你喜欢

转载自blog.csdn.net/you4561512/article/details/91370013
今日推荐