一、background
1.1 基本属性
- background-color：设置背景颜色
- background-image：设置背景图片
- background-repeat：设置背景的重置方式
- repeat：默认值，背景会沿着x轴、y轴双方向重复
- repeat-x：沿着x轴方向重复
- repeat-y：沿着y轴方向重复
- no-repeat：背景图片不重复
- background-position：设置背景图片的位置
- 通过top、left、right、bottom、center几个方位来设置
- 通过数值来设置
- background-position: 水平方向的偏移量 垂直方向变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title> <style> .box1{ width: 300px; height: 300px; /* 设置背景颜色 */ background-color: lawngreen; /* 设置背景图片 */ background-image: url("./img/comics-02.png"); /* 设置图片背景不重复 */ background-repeat: no-repeat; /* 设置图片背景的位置 */ /* background-position: left center; */ background-position: 100px 200px; } </style> </head> <body> <div class="box1"></div> </body> </html>
- background-clip：设置背景的范围
- border-box：默认值，背景会出现在边框的下边
- padding-box：背景不会出现在边框，只出现在内容区和内边距
- content-box：背景只会出现在内容区
- background-origin：背景图片的偏移量计算的原点
- padding-box：默认值，background-position从内边距开始计算
- content-box：背景图片的偏移量从内容区处计算
- border-box：背景图片的变量从边框处开始计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title> <style> .box1{ width: 300px; height: 300px; /* 设置背景颜色 */ background-color: #bfa; /* 设置背景图片 */ background-image: url("./img/comics-02.png"); background-repeat: no-repeat; border: 10px double red; padding: 20px; /* 背景裁剪 */ /* background-clip: border-box; */ /* background-clip: padding-box; */ /* background-clip: content-box; */ /* 设置背景图片的偏移量计算原点 */ background-origin: border-box; /* background-origin: padding-box; */ /* background-origin: content-box; */ } </style> </head> <body> <div class="box1"></div> </body> </html>
- background-size：设置背景图片的大小
- 第一个值表示宽度，第二个值表示高度
- 如果只写一个，则第二个值默认是auto
- cover：图片的比例不变，将元素铺满
- contain：图片背景不变，将图片在元素中完整显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title> <style> .box1{ width: 300px; height: 300px; /* 设置背景颜色 */ background-color: #bfa; /* 设置背景图片 */ background-image: url("./img/comics-01.jpg"); background-repeat: no-repeat; /* 背景图片大小 */ /* 第一个值为宽度，第二个值为高度 */ background-size: 200px 100px; /* 宽度为250px，高度为auto */ background-size: 250px; /* 按 高 等比例铺满 */ /* background-size: cover; */ /* 整张图片显示在块中，按照 宽 比例 */ background-size: contain; } </style> </head> <body> <div class="box1"></div> </body> </html>
- background-attachment：背景图片是否跟随元素移动
- scroll：默认值，背景图片会跟随元素移动
- fixed：背景会固定在页面中，不会随元素移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title> <style> .box1{ width: 300px; height: 300px; background-color: #bfa; background-image: url("./img/comics-01.jpg"); background-repeat: no-repeat; background-size: contain; } .box2{ width: 200px; height: 1000px; background-image: url("./img/comics-02.png"); background-repeat: no-repeat; background-position: 100px 100px; /* background-attachment 背景图片是否随元素移动 */ /* background-attachment: scroll; */ background-attachment: fixed; } </style> </head> <body> <div class="box1"> <div class="box2"> I'm a good coax, but you never try. I am not cold-blooded, let alone slow-fever. I'm just afraid, I put in too much, and I'll be sad when I leave. Afterwards, I realized that both hate and love are a kind of love. Stubborn unwilling to yield, but it is only scarred. I'm a good coax, but you never try. I am not cold-blooded, let alone slow-fever. I'm just afraid, I put in too much, and I'll be sad when I leave. Afterwards, I realized that both hate and love are a kind of love. Stubborn unwilling to yield, but it is only scarred. </div> </div> </body> </html>
1.2 background（综合使用）
- 该样式没有顺序要求，也没有哪个属性是必须写的
- 注：background-size必须写在background-position的后边，并且使用"/"隔开
background-position/background-size
background-origin、background-clip两个样式，origin要在clip前边
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>background</title> <style> .box1{ width: 400px; height: 400px; border: 10px double red; padding: 10px; background: #bfa url("./img/comics-01.jpg") no-repeat padding-box content-box 50px 80px/contain; /* background: 背景色 背景图片 是否铺满 background-origin background-clip background-position/background-size; */ } </style> </head> <body> <div class="box1"> </div> </body> </html>