css设置背景颜色/背景图像/背景图像平铺/背景图像位置/背景图像固定显示/综合设置元素背景的方法（学习笔记）

2023-10-24 17:42:16

在CSS当中，网页元素的背景颜色使用background-color属性来设置，和文本颜色的用法类似。

用法

<style>
  h2{
    color:red;
    backround-color:blue;
    font-family:"黑体"
  }
  body{
    background-color:blue;
    /*设置整个网页的背景颜色*/
  }
</style>

css中将图像作为网页元素的背景，可以用backguound-image属性添加

<style>
  body{
background-image:url(图像路径)
  /*将指定图像平铺显示为整个页面背景*/
}
</style>

注意：背景图片会覆盖背景颜色

默认情况下背景图像会自动沿着水平和竖直两个方向平铺，如果想改变平铺方式，可使用如下属性：

background-repeat:沿水平和竖直两个方向平铺（默认值）

background-no-repeat：不平铺，图像位于元素左上角，只显示一次

repeat-x：沿水平方向平铺

repeat-y：沿竖直方向平铺

用法：

body{
			background-image:url("meishi.jpg");
			background-repeat: repeat-y;
		}

background-position属性用于设置背景图像的定位方式；

位置属性取值	含义与写法
像素单位数值	图像左上角在元素的具体坐标`background-position:20px(水平距离) 20px(竖直距离);`
预定义的关键字	水平方向：`left/center/right`、垂直方向：`top/center/bottom`
百分比取值	`0% 0%`:图像左上角与元素左上角对齐、`50% 50%`图像50% 50%中心的点与元素50% 50%中心的对齐

用法：

body{
		background-image:url("图片路径");
		background-repeat: repeat-y;
		background-position: left center;/*图像位置属性*/
	}

如果网页元素过多，则背景图像会随着元素一同滚动，这是可以使用background-attachment属性固定背景的元素；

含义	固定属性取值
scroll	图像随页面元素滚动（默认值）
fixed	图像固定在页面，不随页面元素滚动

在CSS中，背景属性、padding、margin都是复合属性，可以将背景相关的杨树综合在一个复合属性background中

写法：

background:背景色 url(“图像”) 平铺定位固定；

如：

body{
background: url(xxx.jpg) no-repeat 50px 80px fixed;
}

码农公寓