精灵图/雪碧图/sprite:
-
把小图片放到一张稍大的图片里,减小服务器压力,页面加载速度更快。
-
以右上角开始、向下为-y值,向右为-x值,用ps调
-
核心代码
background: url("./imgs/sprite.png") no-repeat -325px -140px; /* background-position: -325px -140px; */
二倍图:
- 解决移动端图片方法变模糊问题
- 图片为
100*100
,盒子50*50
登录页的背景图充满整个页面:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } .clearfix::before,.clearfix::after{ content: ''; display: table; clear: both; } .main{ width: 100%; height: 100%; background-color: #fff; background: url('./6.jpg') no-repeat; background-position:100% 20%; } .form{ height: 400px; width: 600px; margin: 0 auto; background-color: pink; opacity: .7; margin-top: 100px; } </style> </head> <body> <div class="main clearfix"> <div class="form">我是登录form</div> </div> </body> </html>
-
6.png: