background-position属性设置背景图像的起始位置,背景图像的起始位置会和元素的起始位置一致.
比如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ background-position: left top; background-image: url('image/timg.jpg'); height: 200px; 300px; } </style> </head> <body> <div class="box"> </div> </body> </html>
以上代码中,.box的背景的background-position是left top意思是:背景的左上角和它的父元素.box的左上角重合
注意,背景默认是一比一比例显示的,也就是说,默认情况下,背景不考虑父元素的宽高
我在工作中有几次遇到banner是全屏宽的,一般会用1920的超宽背景图做banner(这种banner的核心内容在中间,两边都是不重要的图案),background-position为center center,父元素高与背景高一致.
设置后,窄一些的屏幕,两边的图案显示少一点,宽一些的屏幕,两边的图案显示多一点.这样既可以满足不失比例显示banner,又可以全屏显示.
如果一定设定背景宽高,需要设定background-size(兼容IE需要用滤镜,我工作中不需要已经不再考虑了).
background-size: length|percentage|cover|contain;
详情见手册