CSS笔记-3：背景

背景颜色

背景颜色的设置可以直接有css设置，下面以div为例

<style>
	div{
		height: 100px;
		width: 50px;
		background-color: blue;
}
</style>

这样可以得到一个蓝色的div色块。一般而言，一个块级元素的背景色会默认为transparent即为透明。
背景颜色也可以设计为半透明的，其书写格式为
background：rgba(0, 0, 0, a); (a在0到1之间，表示透明度,开发过程中可以省略小数前面的0）。

背景图片

背景图片的插入

背景图片的使用场景一般是logo、装饰性图片或背景图，一般在css中的语法是

<style>
	<div>
		background-image: url(......);
	</div>
</style>

如果要更改图像的平铺效果，需要使用background-repeat语句，后面的语法有：

1. repeat 平铺
2. no-repeat 不平铺
3. repeat-x 在水平方向平铺
4. repeat-y 在垂直方向平铺
   如果在背景图片的同时加上背景颜色，则背景图片会在背景颜色之上

控制背景图片的位置

背景图片的位置控制需要使用background-position:x y;语句控制，x、y可以是方位名词，也可以是页面中的精确位置（方位词的顺序和实现效果无关，比如right top=top right,而方位名词只写了一个的话，默认另一个为居中对齐）
如：

background-position:20px 40px;

指的就是在相应的块元素当中的位置。
混合单位就是两种写法的结合，但是也要区分前后的水平和垂直位置。

背景图像的固定

背景图像固定（即为背景附着），显示的效果就是在滚动页面的时候图片是否随页面一起滚动，控制语句为background-attachment:scroll/fixed;
通过前者，就可以使背景图像随页面的滚动而一起滚动，后者则将背景图像一直固定在一个位置，在页面的元素滚动时保持自己在原来视线的位置。

背景的复合写法

之前的字体大小有复合写法，背景图像的设置也不例外，一般书写顺序为
背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置。
比如：

<style>
	body{
		background: red  url(.....)   no-repeat   fixed   center center;
		}
</style>

本文地址：https://blog.csdn.net/leanneTN/article/details/109363882