当容器更改大小时，更改背景图像的哪一侧被修剪？

Question

我有一个div（带有背景图像），图像宽度为40px。

现在，当我将宽度更改为20px时，它会修剪图像的右侧。有没有办法让它修剪左侧呢？

说明：我有一个正方形（角落有4个图像，上下条带有1个图像（条形图像只有1x20，带有repeat-x））。如果我转到仅包含“欢迎！”字样的欢迎页面，则该方块的大小将减小。如果我转到“我的角色”页面，方块的大小将会增加。

意味着方形将始终适合内容。

 <table align="center">
    <tr>
        <td>
            <div id="dynamic" class="DynamicWidth" >
                <div class="ContentTL ContentCorners">
                </div>
                <asp:Panel ID="ContentTC" runat="server" CssClass="ContentTC ContentStrips">
                </asp:Panel>
                <div class="ContentTR ContentCorners">
                </div>
                <div class="ContentDiv">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div class="ContentBL ContentCorners">
                </div>
                <asp:Panel ID="ContentBC" CssClass="ContentBC ContentStrips" runat="server">
                </asp:Panel>
                <div class="ContentBR ContentCorners">
                </div>
            </div>
        </td>
    </tr>
</table>

问题：现在，为了减小和增加正方形的尺寸我不能使用'px'单位，因为在欢迎屏幕中，整个正方形的宽度（2个角和条带）可能是200px而在其他页面中，它是要1000px。

所以我决定使用'％' - 两个角都有相同的宽度％，条的宽度将达到100％（例如：角落各占3％，条带将是96％）

一切都很好，但是有一个问题 - 我的角落图像看起来像这样 - 右下角（）和左下角（）。如果页面真的很小 - 我的左角是好的，但我的右角失去了它的圆度 - 几乎看起来像一个正方形。 （200px的3％非常小，而不是修剪图片的左侧，而是修剪右边的那个，导致圆形尺寸的损失）

解决方案：为了让这件事起作用，我问你从另一边修剪图像的方法，但是我想到了另一个解决方案：我拍了左下图像（）并简单地翻了它（{ {1}}我还有一些用于opera，safari和IE），并且从另一侧调整宽度时会改变宽度。

BTW：现在，我只需要2个角落而不是4个

Answer 1

给它background-position: -20px 0;