當容器更改大小時，更改背景圖像的哪一側被修剪？

我有一個div（有背景圖片），圖片的寬度是40px。當容器更改大小時，更改背景圖像的哪一側被修剪？

現在，當我將寬度更改爲20px時，它將修剪圖像的右側。有什麼辦法可以修剪左側？

說明：我有一個正方形（4個圖像的角落和1個圖像的上部和下部帶（帶圖像只有1x20與重複x））。如果我訪問僅包含「Welcome」字樣的歡迎頁面，則廣場的大小會減小。如果我進入「我的角色」頁面，廣場的大小會增加。

含義廣場將永遠適合的內容。

<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>

問題：現在，對於方形的大小減小和增加我不能在歡迎屏幕使用「像素」單元，因爲，整個正方形的寬度（2角部和帶材）可能是200像素和在其他網頁，它會是1000px。

所以決定用「％」 - 具有寬度的相同％和小條的寬度的兩個角將完成至100％（例如：角部各自的3％，帶材將是96％）

它的所有但有一個問題 - 我的角落圖像看起來像這樣 - 右下（ enter image description here ）和左下（）。如果頁面非常小 - 我的左側角落沒問題，但是我的右側角落失去了圓度 - 幾乎看起來像一個正方形。（200x200像素3％是非常小的，而不是微調畫面的左側是修剪正確的，這導致在一輪規模的損失）

解決方案：對於這個東西的工作，我問你一個方法來從另一面修剪圖像，但比我想到的另一種解決方案：我採取了左下圖像（ enter image description here ），並簡單地翻轉它（-moz-transform: scaleX(-1);我也有歌劇，safari和IE的），並改變寬度，同時從另一邊。

BTW：現在，我只需要2個圖像的角落，而不是4

來源

2011-02-11 Or Betzalel

給它background-position: -20px 0;

來源

2011-02-11 15:32:59 Bazzz

不錯，但它似乎並沒有與％ – 2011-02-11 18:53:59

當容器更改大小時，更改背景圖像的哪一側被修剪？

回答

相關問題