css - 如果 :pseudo elements are not available?，还有哪些其他方法可用于裁剪/剪辑背景图像

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