Question

我需要一些帮助来打破某人的速记速记。

这是我给予的：

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％”呢？

Answer 1

作为cimmanon has mentioned，您实际上将两个背景组合成一个background速记声明。逗号分隔两个层。多个背景的组合是new to 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的供应商扩展，用于linear gradients的实验性实现。但是，除非对所有其他适用的供应商扩展重复background声明，否则由于供应商扩展，您的代码将仅在Mozilla浏览器中运行，而不能在其他浏览器中运行。

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

Answer 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

Answer 3

查看Mozilla参考here和主要部分here。这些应该为您提供一个很好的“方式”和-moz-XXX前缀的解释。

Answer 4

这是你的缩写：

#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中，所有其他浏览器都使用后台规则。渐变的选项不需要重复，因为它们与每个其他浏览器相同。

CSS Deciphering Background简写

4 个答案: