在一个背景CSS属性中组合背景颜色和渐变 [英] Combining background color and gradient in one background CSS attribute

问题描述

我想在单个背景 CSS属性中结合纯色和渐变。然后，我希望这两个背景在单独的 background-position 和 background-size 属性，以便将这两个背景放在一起。

div

< div> ;< / div>

我希望这看起来像这样：

然而，Chrome表示背景属性有一个无效值：

我未能理解为什么。

我试图在堆栈溢出/谷歌上找到类似的答案，但大多数是关于将颜色与图像结合起来，这似乎是一个不同的事情，因为它是视为单一背景。在我的情况下，我想要颜色和渐变为具有不同大小/位置的两个背景。

我不想将纯色进入渐变（这可能在这个例子中），因为两个原因：

• 最后，渐变应该被旋转，但两个背景之间的边界保持垂直。


• 位置/大小应该在转换时动画化（悬停时应该改变70％/ 30％的比例），这是不能用单梯度停止。

我目前的解决方法，我不能相信在这里真正需要，是使用相同的开始和结束颜色将纯色包裹在渐变中。那种丑陋的，我确信有一种更简单的方法...
解决方案

然而， Chrome说背景属性有一个无效值[...]我不明白为什么。

颜色值只能出现在如 spec

中所述，一>。您正在指定最后一层以外的颜色，这会导致您的速记说明无效。

我目前的解决方法，即I在这里不能相信这是真正必要的，就是将纯色以相同的开始和结束颜色包装成渐变色。这种丑陋的，我相信有一个更简单的方法... ...

没有。这是唯一的纯CSS解决方法。你可以选择代表单个红色像素的Base64编码的数据URI，但无论哪种方式，如果该纯色必须与梯度重叠，则必须指定图像值。

I'd like to combine a solid color and a gradient in a single background CSS attribute. Then, I want these two backgrounds to have separate size and position parameters being specified in separate background-position and background-size attributes in order to put these two backgrounds next to each other.

div {
    width: 400px; height: 200px; border: 1px solid gray;
    
    background: red, linear-gradient(to right, black, white);
    background-position: left, right;
    background-size: 70% 100%, 30% 100%;
    background-repeat: no-repeat;
}

<div></div>

I expect this to look like this:

However, Chrome says the background property has an invalid value:

I fail to understand why.

I tried to find similar answers on Stack Overflow / google but most are about combining a color with an image, which seems to be a different thing since it is treated as a "single background". In my case, I want to have color and gradient to be "two backgrounds" with separate sizes / positions.

I do not want to incorporate the solid color into the gradient (which would be possible in this example) because of two reasons:

• In the end, the gradient should be rotated, but the border between the two backgrounds to stay vertical.
• The position / size should be animated in a transition (the 70%/30% ratio should be changed when hovering), which cannot be done with single gradient stops.

My current work-around, which I cannot believe to be really necessary here, is to wrap the solid color in a gradient with the same start and end color. Kind of ugly, and I am sure there is a simpler way...

解决方案

However, Chrome says the background property has an invalid value [...] I fail to understand why.

A color value can only appear in the last layer in an element with layered backgrounds, as stated in the spec. You are specifying a color in a layer other than the last, which renders your shorthand declaration invalid.

My current work-around, which I cannot believe to be really necessary here, is to wrap the solid color in a gradient with the same start and end color. Kind of ugly, and I am sure there is a simpler way...

There isn't. That's the only pure CSS workaround. You could instead opt for a Base64-encoded data URI representing a single red pixel, but either way, you're going to have to specify an image value if that solid color must overlap the gradient.

这篇关于在一个背景CSS属性中组合背景颜色和渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！