2

同じ要素の2つの異なるクラスで背景画像と背景グラデーションを定義することは可能ですか？

input[type=password] {
    background-image: url(/images/icons/glyphicons_203_lock.png);
    background-size: 17px auto;
    background-position: 9px 5px;
}


.err input[name] {
    background: -moz-linear-gradient(top,  #ffdddd 0%, #ffeeee 100%);
}

エラーが発生すると、アイコンが表示されなくなります。

それがまったく役に立った場合、私は「less」を使用しています。避けたいのは、各.err要素の各アイコンを個別に定義する必要があることです。これは多くの繰り返しコードになります。

4

1 に答える 1

2

使用方法では、グラデーションは画像を上書きします。グラデーションも画像であるため、このように画像とグラデーションを分離することでCSS3の複数の背景を使用でき、画像とグラデーションが得られます。

background-image: url('url'), -moz-linear-gradient(top, #ffdddd, #ffeeee);
于 2012-10-31T21:02:21.417 に答える