0

我有一个具有多个背景的按钮。其中一个背景是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 来实现这一目标？

谢谢！

4

2 回答 2

1

您几乎无法做任何事情来裁剪这样的背景。SVG sprite 堆栈与您所能得到的一样接近，但对它的支持很差。

但是，您可以将输入更改为按钮元素：

http://jsfiddle.net/5UGwe/

button:before {
    content: ' ';
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50);
    display: inline-block;
    vertical-align: middle;
}
于 2013-04-05T11:54:12.443 回答
0

知道了。无论添加什么填充，您都可以使用 CSSbox-sizing来保持元素的宽度。content-box因此，可以将按钮设置为图标大小（20x20px）、框大小，content-box从而将 iconsprite 裁剪为 20x20 以上。然后使用填充将按钮拉伸到所需的尺寸。

这里的例子

代码：

.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;
    }
于 2013-04-08T04:29:57.973 回答