水平堆疊不同的背景圖像？

我的應用程序中有一個元素需要三個不同的背景，應該水平堆疊（？），一個接一個。 SliceA是3中的第一個，寬度爲66px，那麼我希望SliceB在SliceA結束之後立即開始，並且在SliceC開始之前停止重複x直到它停止（並且最後一個片有21px - 如果它很重要）。水平堆疊不同的背景圖像？

現在，如果我做

：

background-image: url('imgs/hint1_sliceA_66x29.png'), url('imgs/hint1_sliceB_1x29.png'), url('imgs/hint1_sliceC_21x29.png'); 
background-repeat: no-repeat, repeat-x, no-repeat;

SliceB將在x軸而是通過元素的整個寬度事實重複（請注意，這些片具有透明度，這樣你就可以最終如果一見背景切片在另一個之下）。無論如何，我天真地試過這個：

background-position: left bottom, 66px -21px bottom, right bottom;

但它顯然不允許我定義一個背景元素的左右邊距。

有沒有人有我可以做到這一點的解決方法？有任何想法嗎？謝謝！

來源

2012-11-14 ttothec

不幸的是，我不能幫你到目前爲止您發佈的內容。你能否提供一個小型的，自給自足的演示來展示你到目前爲止的內容 - 包括標記（HTML）和實際圖像？ – KatieK

如果您的圖片沒有任何透明度，那麼只要您更改背景的順序（即將中間重複背景移到列表中的最後一個），您的圖片就會工作，example here。在這個例子中，背景圖片確實有透明的背景，可以讓你看到重疊的背景。您可能想要測試瀏覽器的兼容性，它適用於Linux和Chrome瀏覽器。

background-image: 
     url('imgs/hint1_sliceA_66x29.png'), 
     url('imgs/hint1_sliceC_66x29.png'), 
     url('imgs/hint1_sliceB_66x29.png'); 
    background-position: left bottom, right bottom, left bottom; 
    background-repeat: no-repeat, no-repeat, repeat-x;

如果是這種情況並非如此，你的情況允許的話，它可能是最簡單的方法將圖像轉換爲那些不具有透明性的元素。

或者，你可以使用一個填充和background-clip財產，example：

background-clip: border-box, border-box, content-box; 
    -webkit-background-clip:border-box, border-box, content-box; 
    padding: 0 66px;

來源

2012-11-14 20:33:48

我會給這個背景片段。 – ttothec

通過背景剪輯的文檔閱讀我記得，人們可以設計邊框...不是人們用來在舊CSS中的按鈕上創建圓角的方式嗎？也許我可以使用它來實現這種可擴展性？只是不記得它是如何完成的......：s – ttothec

background-clip完美運作。只需添加文本縮進來彌補添加的填充和什麼不... 最終代碼： 'background-image：url（'imgs/hint1_sliceA_66x29.png'），url（'imgs/hint1_sliceB_1x29 .png'），url（'imgs/hint1_sliceC_21x29.png'）; \t背景位置：左下，左下，右下; \t背景重複：不重複，重複x，不重複; \t background-clip：border-box，content-box，border-box; \t -webkit-background-clip：border-box，content-box，border-box; \t padding-right：21px; \t padding-left：66px; \t text-indent：-45px;' – ttothec

水平堆疊不同的背景圖像？

回答

相關問題