如果僞元素不可用，還有其他什麼方法可用於裁剪/裁剪背景圖像？

Question

我有一個具有多個背景的按鈕。其中一個背景是包含圖標的CSS-sprite（864px x 18px）。

我試圖添加背景到<input>元素，使其成爲一個帶有圖標的按鈕。問題是，我不能使用:before/:after，因爲輸入沒有內容，所以我不能添加元素，指定它的比例並使用background-size/position。

以下是我有：

.buttonUpInput { 
    background: rgba(0, 0, 0, 0.4), #7EB238; 
    background-image: none; /* fallback */ 
    background-image: url("http://mysprite.png"), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(rgba(52,109,28,1)), color-stop(rgba(52,109,28,0))), -webkit-gradient(linear, left top, left bottom, from(#9ad945), to(#7eb238)); 
    background-image: url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png"), -webkit-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -webkit-linear-gradient(#9ad945, #7eb238); 
    background-image: url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png"), -moz-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -moz-linear-gradient(#9ad945, #7eb238); 
    background-image: url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png"), -ms-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -ms-linear-gradient(#9ad945, #7eb238); 
    background-image: url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png"), -o-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -o-linear-gradient(#9ad945, #7eb238); 
    background-image: url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png"), radial-gradient(ellipse at center, rgba(52,109,28,1) 67%, rgba(52,109,28,0) 69%), linear-gradient(#9ad945, #7eb238); 
    background-attachment: scroll, scroll, scroll; 
    background-repeat: no-repeat, no-repeat, no-repeat; 
    background-position: -100px 50%, 7px 50%, center center; 
    background-size: 864px 18px, 20px 20px, auto auto; 
    background-clip: content-box, content-box, padding-box; 
    border: 1px solid #aaa; 
    -moz-border-radius: .7em; 
    -webkit-border-radius: .7em; 
    border-radius: .7em; 
    color: white !important; 
    font-size: 16px; 
    font-weight: 800; 
    padding: 2px 14px 4px 1px; 
    text-indent: 35px; 
    width: auto; 
    height: 2.25em; 
    cursor: pointer; 
} 

問：
我可以嘗試硬編碼/調整按鈕的大小/寬度（我寧願是靈活的），試圖用content-box/padding-box，但我無法讓它工作。我想知道是否有任何其他方法只用CSS來實現這一點？

謝謝！

Answer 1

幾乎沒有什麼可以做到裁剪這樣的背景。 SVG sprite stacks差不多可以得到，但對它的支持很差。

但是，你可以在你輸入變爲按鈕元素：

http://jsfiddle.net/5UGwe/

button:before { 
    content: ' '; 
    width: 50px; 
    height: 50px; 
    background: url(http://placehold.it/50x50); 
    display: inline-block; 
    vertical-align: middle; 
} 

Answer 2

明白了。您可以使用CSS box-sizing，當設置爲content-box時，無論添加了什麼填充都可以保持元素的寬度。因此，按鈕可以設置爲圖標大小（20x20像素），盒子大小爲content-box，從而將圖標精靈脩剪爲20x20以上。然後使用填充將按鈕拉伸到所需的尺寸。

例here

代碼：

.icon_text { 
    background: rgba(0, 0, 0, 0.4), #7EB238; 
    background-image: none; /* fallback */ 
    background-image: url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png"), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(rgba(52,109,28,1)), color-stop(rgba(52,109,28,0))), -webkit-gradient(linear, left top, left bottom, from(#9ad945), to(#7eb238)); 
background-image: url("url.png"), -webkit-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -webkit-linear-gradient(#9ad945, #7eb238); 
    background-image: url("url.png"), -moz-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -moz-linear-gradient(#9ad945, #7eb238); 
    background-image: url("url.png"), -ms-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -ms-linear-gradient(#9ad945, #7eb238); 
background-image: url("url.png"), -o-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0)), -o-linear-gradient(#9ad945, #7eb238); 
    background-image: url("url.png"), radial-gradient(ellipse at center, rgba(52,109,28,1) 67%, rgba(52,109,28,0) 69%), linear-gradient(#9ad945, #7eb238); 
    background-attachment: scroll, scroll, scroll; 
    background-repeat: no-repeat, no-repeat, no-repeat; 
    background-position: -100px 50%, 7px 50%, center center; 
    background-size: 864px 18px, 20px 20px, auto auto; 
    background-clip: content-box, content-box, padding-box; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    border: 1px solid #aaa; 
    -moz-border-radius: .7em; 
    -webkit-border-radius: .7em; 
    border-radius: .7em; 
    color: white !important; 
    font-size: 16px; 
    font-weight: 800; 
    cursor: pointer; 
    text-indent: 2.1em; 
    /* padding still hardcoded */ 
    padding: 5px 92px 6px 7px; 
    width: 20px; 
    height: 20px; 
    }