0

複数の背景を持つボタンがあります。背景の 1 つは、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 スプライト スタックは可能な限り近いものですが、サポートは非​​常に貧弱です。

ただし、入力をボタン要素に変更できます。

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

とった。どのようなパディングが追加されても要素の幅box-sizingを維持するように設定すると、CSS を使用できます。content-boxしたがって、ボタンをアイコンサイズ (20x20px) に設定し、ボックスサイズを設定してcontent-box、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 に答える