1.背景颜色：background-color
在CSS中，我们可以使用background-color属性来定义元素的背景颜色。
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div> </div> </body> </html>
2.背景图片样式：background-image
在CSS中，我们可以使用background-image属性来为元素定义背景图片
例如，我们可以通过如下的代码来为我们的网页设置背景图片：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> body { background-image: url("https://img0.baidu.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394"); } </style> </head> <body> </body> </html>
背景图片重复：background-repeat
在CSS中，我们可以使用background-repeat属性来定义背景图片的重复方式
background-repeat属性取值有4个
例如：通过如下代码设置图片只在水平方向上平铺展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> body { background-image: url("https://img0.baidu.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394"); background-repeat: repeat-x; } </style> </head> <body> </body> </html>
3.背景图片位置：background-position
在CSS中，我们可以使用background-position属性来定义背景图片的位置
background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”
当background-position属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。例如，“background-position:12px 24px;”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。
实例：该网页展示的图片距离左上角水平距离为40px，垂直距离为20px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> body { background-image: url("https://img0.baidu.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394"); background-repeat: no-repeat; background-position: 40px 20px; } </style> </head> <body> </body> </html>
当background-position属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已
实例：如下表示图片居中展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <style type="text/css"> body { background-image: url("https://img0.baidu.com/it/u=4011354630,2790164740&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394"); background-repeat: no-repeat; background-position: center center; } </style> </head> <body> </body> </html>
4.背景图片固定：background-attachment
在CSS中，我们可以使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动
