背景定位的三个方法——《css揭秘》

(1)background-position
可以避免去算左上角的偏移量，直接指定位置。

<style type="text/css">
        .wrapper{
            background: url(paypal.png) no-repeat #58a;
            background-position: right 20px bottom 10px;
            width: 1000px;
            height: 890px;
        }   
</style>

image.png

(2)background-origin
这个属性可以让位置跟着padding的改变而改变。
因为background-position一般默认是根据padding box来定位的。而background-origin可以将其改成content box。

<style type="text/css">
        .wrapper{
            background: url(paypal.png) no-repeat rgb(170, 136, 85) bottom right; /* 或 100% 100% */
            background-origin: content-box;
            width: 1000px;
            height: 890px;
            padding: 50px;
        }
</style>

image.png

(3)calc()

background-position: calc(100% - 20px) calc(100% - 10px);

ps:注意"减号"和"加号"前后要加空格。