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.3); */ background-color: rgba(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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
