0

誰かの速記をロングハンドに分解するのに少し助けが必要です。

これが私に与えられたものです：

background: url("img.png") repeat scroll 0 0%, -moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent;

私はこれまでに得ました：

background-image:url('jAGNPCMaDe9LJ5wqwVhLimg.png');

しかし、残りは間違いなく私にとってギリシャ語です。-moz-linear-gradent（）に興味があります。これはすべてのブラウザが認識するものですか？そして、括弧内の色はグラデーション効果を適用する必要があると思います（-moz-linear-gradientから推測）そして「repeatscroll 0 0％」は何をしますか？

4

4 に答える 4

3

cimmanonが言及したように、実際には 2 つの背景を組み合わせて 1 つのbackground省略形の宣言を見ています。コンマは 2 つのレイヤーを区切ります。この複数の背景の組み合わせはCSS3 の新機能です。したがって、簡略表記で 2 つの異なる背景レイヤーがあります。

url("img.png") repeat scroll 0 0%
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent

そして、それぞれが独自の値のセットに展開されます。

コードの正しい手書き展開は次のとおりです。

background-image: url("img.png"), -moz-linear-gradient(#4E4E4E, #1C1C1C);
background-repeat: repeat, repeat;
background-attachment: scroll, scroll;
background-position: 0 0%, 0 0;
background-color: transparent;

ここでも、複数の背景レイヤーを区切るためにコンマが使用されていることに注意してください。background-color複数の背景色を持つことはできないため、1 つしかありません。

また、前述のように、-moz-プレフィックスは Mozilla のベンダー拡張であり、線形グラデーションの実験的実装に使用されます。ただし、background適用可能な他のすべてのベンダー拡張機能について宣言が繰り返されない限り、コードは Mozilla ブラウザーでのみ機能し、ベンダー拡張機能のために他のブラウザーは機能しません。

また、短縮形の代わりに上記の短縮形のコードを使用すると、サポートされていないブラウザが完全に無視する短縮形とは異なり、サポートされていないブラウザは宣言を無視しbackground-imageて他のすべてを適用することに注意してください。

于 2012-09-18T12:58:01.467 に答える
2

You're actually looking at multiple backgrounds there. The comma is the separator.

url("img.png") repeat scroll 0 0% /* on top */
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent /* on bottom */

The gradient is taking the spot of the background image. The rest should be easy to figure out by reading up on the background property.

https://developer.mozilla.org/en-US/docs/CSS/background

于 2012-09-18T11:55:42.690 に答える
0

ここの Mozilla リファレンスと、ここのメイン セクションをご覧ください。これらは、適切な「方法」と -moz-XXX プレフィックスの説明を提供するはずです。

于 2012-09-18T11:58:24.180 に答える
-3

これがあなたの手書きです：

#element{
  background-image:url(img.png);
  background-repeat:repeat;
  background-attachment:scroll;
  background-position:0 0;
  background-color:transparent
  background-image:-moz-linear-gradient(#4E4E4E, #1C1C1C);
}

-moz-linear-gradient は Mozilla でのみ機能します。そのため、事前に -moz- が付けられています。ご想像のとおり、画像の代わりに背景として線形グラデーションが作成されます。ただし、Mozilla でのみ、他のすべてのブラウザーがバックグラウンド ルールを使用します。グラデーションのオプションは、他のすべてのブラウザーと同じであるため、繰り返す必要はありません。

于 2012-09-18T11:59:28.403 に答える