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推导）“重复滚动0 0％”有什么作用？

4

4 回答 4

3

正如cimmanon 所提到的，您实际上是在查看两个背景组合成一个background速记声明。逗号分隔两层。这种多种背景的组合对于 CSS3 来说是新的。因此，您有两个不同的速记背景层：

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，因为您不能有多种背景颜色。

同样如前所述，-moz-前缀是 Mozilla 的供应商扩展，用于其线性渐变的实验性实现。但是，除非您background对所有其他适用的供应商扩展重复声明，否则您的代码将仅在 Mozilla 浏览器中有效，并且由于供应商扩展而无法在其他浏览器中使用。

另请注意，如果您使用上面的简写代码而不是简写，不支持的浏览器只会忽略background-image声明并应用其他所有内容，这与不支持的浏览器将完全忽略的简写不同。

于 2012-09-18T12:58:01.467 回答
2

您实际上正在那里查看多个背景。逗号是分隔符。

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

渐变占据了背景图像的位置。background其余的应该很容易通过阅读财产来弄清楚。

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 回答