css background-position

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;
            width: 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;
详情见手册
posted @ 2017-12-15 14:16  toDoYourBest  阅读(136)  评论(0)  编辑  收藏  举报