【温故知新】CSS学习笔记（背景）
CSS背景
1、background-color：背景色；
例如：background-color: #000;
外部链接 ：CSS颜色表
2、background-image：背景图片；
例如：background-image: url(images/ms.jfif);
外部链接 ：相对位置与绝对位置
3、background-repeat：设置背景图像如何铺排；
- repeat：背景图像在纵向和横向上平铺（默认）；
- no-repeat:背景图像不平铺；
- repeat-x:背景图像在横向上平铺；
- repeat-y:背景图像在纵向上平铺；
例如：background-repeat: no-repeat;
4、background-position：设置背景图像的位置；
- Position后面可以跟方位名称，他们之间没有前后顺序；
上：top
下：bottom
左：left
右：right
例如 ：
background-position：center center； 水平垂直居中
background-position：center top； 水平居中靠上，一般游戏网页背景大图会使用这个方式；
- Position如果只写一个值，另外一个则默认是据中的；
例如：
background-position：right；
background-position：bottom；
- Position后面同样可以跟精确值（px），但是必须有顺序，先X轴后Y轴；
例如：background-position：12px 50px;
- Position后面可以同时跟方位名词和精确值，但是还是需要注意顺序；
例如：
background-position：12px center;
或者background-position：12px ;
5、background-attachment：设置背景图像内容是滚动的还是固定的；
- Scroll:背景图像是随对象内容滚动的（默认）；
- Fixed:背景图像是固定的；
例如：background-attachment: fixed;
【综合样例代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>魔兽世界怀旧版</title><style>body {background-image: url(images/ms.jfif);background-position: center top;background-repeat: no-repeat;background-color: #000;background-attachment: fixed;}</style> </head> <body></body> </html>便捷方式- background简写
属性值的书写顺序没有强制的标准，但是为了可读性，建议如下写书：
Background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
上面样例就可以简写成如下形式：
background: #000 url(images/ms.jpg) no-repeat fixed center top；
总结
以上是生活随笔为你收集整理的【温故知新】CSS学习笔记（背景）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 【温故知新】CSS学习笔记（三大特性）
- 下一篇： 【温故知新】CSS学习笔记（盒子边框介绍