灵活的背景定位background-position的拓展语法方案background-origin方案calc方案源代

background-position的拓展语法方案

#背景离右/下内边距3rem，background-origin默认为padding-box
background-position: right 3rem bottom 3rem;

background-origin方案

#背景离右/下内边距20px
    padding: 20px;
    background-position: right bottom;
    background-origin: content-box;

calc方案

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

源代码

#html
<body>
    <div class="container">
        <div class="bpExpandGrammar">

        </div>
        <div class="bgOrigin">
            
        </div>
        <div class="bgCalc">

        </div>
    </div>
</body>

#css
div{
    float: left;
}
.bpExpandGrammar{
    width: 300px;
    height: 300px;
    margin: 1rem;
    border: 10px solid;
    padding: 20px;
    background-image: url('./th.jpeg');
    background-repeat: no-repeat;
    background-position: right 3rem bottom 3rem;
}
.bgOrigin{
    width: 300px;
    height: 300px;
    margin: 1rem;
    border: 10px solid;
    background-image: url('./th.jpeg');
    background-repeat: no-repeat;
    padding: 20px;
    background-position: right bottom;
    background-origin: content-box;
}
.bgCalc{
    width: 300px;
    height: 300px;
    margin: 1rem;
    border: 10px solid;
    background-image: url('./th.jpeg');
    background-repeat: no-repeat;
    padding: 20px;
    background-position: calc(100% - 20px) calc(100% - 20px);
}