CSS的background背景属性详解
background 是一个盒子的背景，经常会用于设置背景颜色、背景图片
background一共有8个属性 来设置background的形状
- background-color: 背景颜色
- background-image: 背景图片
- background-repeat: 重复背景图片
- background-attachment: 是否固定或者随着页面的其余部分滚动
- background-position: 背景图片的位置
- background-size: 背景的尺寸
- background-origin: 背景图片定位区域
- background-clip: 背景图片绘制区域
接下来我们依次看一下每个属性的作用和功能
- background-color: 背景颜色
默认值：transparent 背景颜色为透明。
代码：
background-color: white; // 系统定义的颜色名 background-color: rgb(255,255,255); // rgb 和 rgba 格式 background-color: hsla(120,30%,24%,.3); // hsla() 中的a 是Alpha 通道，表示不透明度,值为0到1
background-image: 背景图片
默认值：none
代码：
linear-gradient() //创建一个线性渐变的 "图像"(从上到下) radial-gradient() //用径向渐变创建 "图像" repeating-linear-gradient() //创建重复的线性渐变 "图像"。 repeating-radial-gradient() //创建重复的径向渐变 "图像" inherit //指定背景图像应该从父元素继承
background-repeat: 重复背景图片
默认值：repeat 背景图像将向垂直和水平方向重复
repeat-x // 背景图像将在水平方向重复。 repeat-y // 背景图像将在垂直方向重复。 no-repeat // 背景图像将仅显示一次。 inherit // 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment: 是否固定或者随着页面的其余部分滚动
默认值：scroll //背景图像会随着页面其余部分的滚动而移动。
background-attachment: fixed; //当页面的其余部分滚动时，背景图像不会移动。 inherit // 规定应该从父元素继承 background-attachment 属性的设置。
background-position: 背景图片的位置
默认值：0% 0%
提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
background-position:center; // 居中 background-position:20% 20%; background-position:top left; // x轴和y轴的设置 还有多种搭配就不一一写了
background-size: 背景的尺寸
默认值：auto
background-size:80px 60px; // 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 background-size:cover;//把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 background-size:contain;//把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-origin: 背景图片定位区域
默认值：padding-box 背景图像相对于内边距框来定位。
background-origin:content-box; // 背景图像相对于内边距框来定位。 background-origin:border-box; // 背景图像相对于边框盒来定位。 background-origin:border-box; // 背景图像相对于内容框来定位。
background-clip: 背景图片绘制区域
默认值：border-box //背景被裁剪到边框盒。
background-clip:padding-box; // 背景被裁剪到内边距框。 background-clip:content-box; // 背景被裁剪到内容框。
亿点小知识:在开发中我们可以简写以下代码：
background：url（） no-repeat center;
以上就是background的属性和用法感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
