0

私は以下を機能させるために小さな問題を抱えていますが、それがCSS3が処理するように設計されているものであるかどうかはわかりません。周りを見回してみると、複数の背景画像がサポートされていることがわかりましたが、多くの例を試してみると、灘になりました。

これは、ボタンをレンダリングするための主要なCSSコードです。

.button {
    background:#eee url(images/button.gif) repeat-x 0 0;
    border:solid 1px #b1a874;
    color:#7f7f7f;
    font-size:11px;
    padding:2px 6px 2px 6px;
    cursor:pointer;
    line-height:14px !important;
}

上記のコードは、問題のない標準ボタンを生成します。しかし、今度は、印刷ボタンなどの特定のボタンにアイコンを追加したいと思います。2セットの追加のCSSクラスを使用します。

input.addImage {
    background-repeat: no-repeat;  /* once */
    background-position: 5px 2px;  
    padding-left: 16px;     
    vertical-align: middle;
}

と：

input.Print {
    background-image: url(../img/buttons/print.png); /* 16px x 16px */
}

ご覧のとおり、私の画像は実際には16x16で、ボタンにぴったり収まります。ただし、元の背景画像は完全に削除され、背景色は透明のままになります。

可能であれば、私が見落としている基本的なことだと確信しており、これを理解することを楽しみにしています。

最後に、ボタンのコード：

<input type="button" class="button addImage Print" ... >

貴重なお時間をいただき、誠にありがとうございます。

4

2 に答える 2

1

複数の背景は、同じCSSクラス/要素定義内でのみサポートされます。つまり、で両方の背景を設定する必要があります.button。

カンマ.printで区切られ、アイコンが続くデフォルトの背景を含める必要がありprint.pngます。

編集

私の答えはそれについて本当に明確ではありませんでした。最初に背景を指定する必要があります。背景は他の背景の上に配置する必要があります。ランダムな画像を使用したサンプルコードを次に示します。

デモ： http： //jsfiddle.net/RzWfp/

.button {
    background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg);
    border:solid 1px #b1a874;
    color:#7f7f7f;
    font-size:11px;
    padding:2px 6px 2px 6px;
    cursor:pointer;
    line-height:14px !important;
}

.button-test {
    background-image:  url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg);   
    background-position: left center, center center;
    background-repeat: no-repeat;
    padding-left: 20px;
}
于 2013-01-21T13:01:46.247 に答える
1

CSSでプロパティを適用すると、その要素に対して以前に定義されたプロパティが完全に上書きされます。あなたがする必要があるのは、要素に2つの背景を適用するように指示することです。これは、次のように行われます。

.button.Print {
    background-image: url(images/button.gif), url(../img/buttons/print.png);
}
于 2013-01-21T13:01:55.727 に答える