background:
①background: red; (颜色或者url)
②background: red top left no-repeat; 相当于background、position、repeat加一起一样
background-position: 左上(left top) 右上(right top) 右下(right bottom) 左下(left bottom)
background-repeat: repeat no-repeat
background-image: url('')
background-size: 0px 0px; (宽 高)(背景是图片的时候使用)
background-origin:border-box padding-box context-box (用于背景是图片的时候)
background-clip: border-box padding-box context-box (用于背景是颜色的时候)
例子
1.背景颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { border: 1px solid black; width: 100px; height: 100px; background: red; } </style> </head> <body> <div>sfdfdfdfd</div> </body> </html> |
结果:
2.背景图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { border: 1px solid black; width: 100px; height: 100px; background: url(u=1291417747,3760118869&fm=26&gp=0.jpg); background-repeat: no-repeat; } </style> </head> <body> <div></div> </body> </html> |
结果:
3.背景大小
①background-size:20px 20px;
②background-size:100% 100%; 填充满背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { border: 1px solid black; width: 100px; height: 100px; background: url(u=1291417747,3760118869&fm=26&gp=0.jpg); background-size: 100% 100%; background-repeat: no-repeat; } </style> </head> <body> <div></div> </body> </html> |
结果:
与上一个对比可以看出,不同
4.background-origin
①border-box 在盒子边框开始
②padding-box 在盒子内边距开始
③context-box 在盒子内容开始
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { border: 1px solid black; padding: 30px; width: 100px; height: 100px; background: url(u=1291417747,3760118869&fm=26&gp=0.jpg); background-size: 30px 30px; background-repeat: no-repeat; background-origin: padding-box; } </style> </head> <body> <div>ddfdff</div> </body> </html> |
结果:
clip和origin一样的效果,只不过clip修饰的是颜色。clip=context-box的结果