Question

我在尝试使用多个背景时遇到了一个奇怪的问题。我想要的基本效果是边缘的渐变背景和中间的透明背景。这是真正基本的代码：

background: transparent, linear-gradient(45deg, #f06, yellow);
background-size:50% 50%, 100% 100%;
background-position: 50% 50%, 0 0;
background-repeat: no-repeat;

我正在使用dabblet来玩它。如果我使用该代码，我什么也得不到（我将transparent替换为green，请确保我能够看到它）：http://dabblet.com/gist/5339331

但是，如果我颠倒背景（backgound: linear-gradient(45deg, #f06, yellow), green;），它会按预期完美地运作，除了当然它在反向：http://dabblet.com/gist/5339291

这里发生了什么？为什么它会以一种方式而不是另一种方式工作？我还尝试用blue替换渐变，使其变得简单，但它不起作用：http://dabblet.com/gist/5339396

仅供参考我正在使用Chrome 27进行测试，并收到黄色!并显示警告Invalid property value.

编辑：这是我想要的better (yet still broken) example效果。在这个例子中，有四个部分，每个部分都有自己的渐变背景。理想情况下，我有一件因为

它允许看起来正确的渐变。
这看起来很糟糕，在移动设备上效果不佳。
如果可能的话，最好避免额外的固定/绝对div

Answer 1

您可能知道，transparent是一个颜色值，而不是图像值，就像blue一样。由于它是一个颜色值，因此必须在background简写中最后指定，而仅，因为only the base layer may have a background color。这就是Chrome的Web Inspector使用您所拥有的内容报告无效属性值的原因。

不幸的是，没有办法使用多个背景来指定单个背景图像及其切出的区域（例如，在中间区域显示透明开口）。

你对jsFiddle所拥有的是一个步骤。您可以通过向div和::before添加::after和html伪元素来轻松取消额外的body元素，因此您有四个要使用的伪元素。您还需要使用background-size和background-position来适当调整渐变背景，使其看起来无缝。

由于您希望渐变在保持无缝状态时是半透明的，因此您需要防止它们重叠。通过相应地调整偏移量和background-size可以很容易地实现这一点。

这是我用过的CSS：

html::before, html::after, body::before, body::after {
    display: block;
    position: fixed;
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
    content: '';
}

html::before, html::after {
    height: 25%;
    left: 25%;
    right: 25%;
    background-size: 200% 400%;
}

body::before, body::after {
    width: 25%;
    top: 0;
    bottom: 0;
    background-size: 400% 100%;
}

html::before { top:    0; background-position: top;    }
html::after  { bottom: 0; background-position: bottom; }
body::before { left:   0; background-position: left;   }
body::after  { right:  0; background-position: right;  }

jsFiddle preview（with borders to show how I've arranged the pseudo-elements）

如果只有一个盒子，你将无法做到这一点，所以是的，它可能在移动设备上表现不佳。如果这不能很好地工作，那么您可以使用SVG背景来实现这一点，或者如果失败，您可能不得不回归使用传统的预渲染背景图像。

Answer 2

CSS background速记属性语法如下：

background: background-color background-image background-repeat background-attachment, background-position

请注意，没有任何逗号，因此最好不要使用逗号，尤其是在分隔background-color和background-image时。

使用所有这些并返回原始示例：http://dabblet.com/gist/5340042

CSS多背景工作不一致

2 个答案: