05背景透明度.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background: #000 url(img/king.jpg) no-repeat top center; } div { height: 400px; /* background: rgba(0,0,0,0.3); */ background-color: rgba(0,0,0,0.3); } </style> </head> <body> <div></div> </body> </html>
06背景缩放.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: #ccc; } div { width: 100px; height: 140px; background: hotpink url(img/l.jpg) no-repeat; /* 设置背景图片大小 background-size*/ /* background-size: 100px; */ /*我们尽量改一个值 防止缩放失真扭曲*/ /* background-size: 100%; */ /* 268:418=100%*400:?*/ /* 会自动调整缩放比例 保证图片始终填充满背景区域，假如有 溢出部分则被隐藏 cover平时用的最多 */ /* background-size: cover; */ background-size: contain; /*会自动调整缩放比例 保证图片始终完整显示在背景区域 图片进行等比例缩放，假如图片高度或者宽度有一个和盒子 一样大 就不在缩放 这样好处图片完整，不会缺失一部分 */ } </style> </head> <body> <div></div> </body> </html>
07多背景.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 500px; height: 500px; background: url(img/3.jpg) no-repeat left top, url(img/l.jpg) no-repeat left top hotpink; } </style> </head> <body> <div></div> </body> </html>