CSS背景控制--背景色

最新推荐文章于 2024-04-19 15:49:30 发布

没加工的方便面

最新推荐文章于 2024-04-19 15:49:30 发布

阅读量1.8k

点赞数 2

分类专栏： Css

本文链接：https://blog.csdn.net/you4561512/article/details/91370013

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

7、Style标签控制网站打印背景

通过style中的media="print"来控制页面打印的样式控制

<style media="print">
	<h1> {XXX}
	<p> {XXX}
</style>

8、Stype标签中使用运算符

<style media="screen and (min-width:512px) and (max-width:1024px)">
	body {background: url("./img/xxx.jpg")}
</style>

其中，media=“screen” 代表设定屏幕显示的格式 min代表不小于设定的像素值，max表示不大于设定的像素值。以上代码如果满足页面大小满足表达式中的条件，显示body中指定的背景图片，如果不满足，则显示默认的背景图

没加工的方便面

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS背景控制--背景色

CSS背景控制--背景色1、背景颜色---英文单词2、背景颜色---16进制颜色3、背景颜色---rgb颜色4、背景色的透明度5、背景的线性渐变6、背景的怪向渐变背景颜色的设置方法有三种：颜色的英文单词、16进制颜色、rgb颜色。其他常用的背景方法有设置背景色透明度、背景的线性渐变、背景的怪向渐变1、背景颜色—英文单词2、背景颜色—16进制颜色3、背景颜色—rgb颜色4、背景色的透明度...
复制链接

扫一扫