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

Question

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

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

解释：我有一个正方形（4 个角图像和 1 个上下条带图像（条带图像仅为 1x20，带有重复 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% 确实很小，它不是修剪图片的左侧，而是修剪右侧的图像，从而导致圆形尺寸的损失）

解决方案：为了使这个东西起作用，我向您询问了一种从其中修剪图像的方法另一边，但我想到了另一个解决方案：我拍摄了左下图像（）并简单地翻转了它（-moz-transform: scaleX(-1); 我也有用于 Opera、Safari 和 IE 的），并且宽度会在从另一侧修剪时发生变化。

顺便说一句：现在，我只需要 2 个角点图像，而不是 4 个

Answer 1

给它背景位置：-20px 0;