-1

私はこのCSSコードを持っていて、それを短くしたい.

#one{
background: #6cab26;
background-image: url(#1_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
}

#two{
background: #6cab26;
background-image: url(#2_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */

}

#three{
background: #6cab26;
background-image: url(#3_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
}

このCSSコードは、背景でグラデーションを使用することです!

それはとてもうまくいっていますが、どのように短くするのですか？

私はこのようなものが欲しい

#one,#two,#three{
background: #6cab26;
background:-moz-linear-gradient(top, #444444, #999999);
}

#one{
background-image: url(#1_img_url)
}
#two{
background-image: url(#2_img_url)
}
#three{
background-image: url(#3_img_url)
}
4

2 に答える 2

2

編集

Maratが提案したように、プリプロセッサを使用せずにコードをできるだけ短くします（彼の功績です！）

于 2012-06-14T21:42:38.377 に答える
2

残念ながら、CSS は現在、複数の背景画像レイヤーを使用する場合に個別の背景画像レイヤーをオーバーライドする方法を提供していません。

LESSやSASSなどの CSS プリプロセッサを利用すると、グラデーションを変数に保存して重複を防ぐことができます。たとえば、LESS では次のようになります。

@grad: -moz-linear-gradient(top, #444444, #999999);

#one {
    background-image: url(#1_img_url), @grad;
}

#two {
    background-image: url(#2_img_url), @grad;
}

#three{
    background-image: url(#3_img_url), @grad;
}
于 2012-06-14T21:49:08.997 に答える