CSS学习笔记6-背景样式

最新推荐文章于 2022-11-03 12:06:54 发布

糯米味儿的粽子

最新推荐文章于 2022-11-03 12:06:54 发布

阅读量471

点赞数

分类专栏： # CSS 文章标签： css

本文链接：https://blog.csdn.net/emmm520/article/details/119738053

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

CSS学习笔记6——背景样式

背景样式

background-color

背景颜色

background-color: green;

background-image

背景图片

background-image: url(./images/bg.png);

background-repeat

背景图片的平铺，有如下值：

值	描述
repeat	默认值，在横向，纵向都平铺
no-repeat	不平铺
repeat-x	仅在横向平铺
repeat-y	仅在纵向平铺

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css背景样式</title>
	<style type="">

		body{
			/*background-color: green;
			background-image: url(./images/bg.png);
			background-repeat: repeat-x;*/

			/*
				线性渐变的三个参数：
				第一个参数：控制渐变方向（top、left、right、bottom）
				第二个参数：渐变起始颜色
				第三个参数：渐变结束颜色

				600像素高度上，由上向下，由蓝色向绿色渐变
			 */
			height: 600px;
			background: -webkit-linear-gradient(top,blue,green);
			background-repeat: no-repeat;
		}
	</style>

</head>
<body>
	
</body>
</html>