Question

我希望在单个background CSS属性中组合纯色和渐变。然后，我希望这两个背景在单独的background-position和background-size属性中指定单独的大小和位置参数，以便将这两个背景放在一起。

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

我希望这看起来像这样：

但是，Chrome说背景属性的值无效：

我不明白为什么。

我试图在Stack Overflow / google上找到类似的答案，但大多数是关于将颜色与图像相结合，这似乎是另一回事，因为它被视为＆＃34;单一背景＆＃34;。在我的情况下，我希望颜色和渐变是＆＃34;两个背景＆＃34;具有不同的尺寸/位置。

我不想将纯色纳入渐变（在本例中可能会这样），原因有两个：

最后，应该旋转渐变，但两个背景之间的边框保持垂直。
位置/大小应在转换中设置动画（悬停时应更改70％/ 30％的比率），这不能通过单个渐变停止来完成。

我目前的解决方法是将纯色包装在具有相同开始和结束颜色的渐变中，这在我看来是非常必要的。有点难看，我相信有一种更简单的方式...

Answer 1

但是，Chrome说背景属性的值无效[...]我无法理解为什么。

颜色值只能出现在具有分层背景的元素的最后一层中，如spec中所述。您正在指定除最后一层之外的图层中的颜色，这会使您的速记声明无效。

我目前的解决方法是将纯色包装在具有相同开始和结束颜色的渐变中，这在我看来是非常必要的。有点难看，我相信有一种更简单的方式...

没有。这是唯一纯粹的CSS解决方法。您可以改为选择表示单个红色像素的Base64编码数据URI，但不管怎样，如果该纯色必须与渐变重叠，则必须指定图像值。

Answer 2

linear-gradient()与url()类似，是一张图片（background-image）。在简写语法中，颜色不在图像旁边（background-color） <edit>可以设置多个渐变并通过background-size 设置动画：

＆＃13;

div {
  width: 400px;
  height: 200px;
  border: 1px solid gray;   
  background:linear-gradient(to top,red,red) no-repeat, linear-gradient(to right,black, white) no-repeat  100% 0 tomato; 
  background-size: 20% auto, 80% auto;
  animation: animate 4s infinite alternate;
}
@keyframes animate {
from {  background-size: 20% auto, 80% auto;}
30% {  background-size: 10% auto, 10% auto;}
90%, to {  background-size: 70% auto, 30% auto;}
}

＆＃13;

<div>

</div>

＆＃13;

请注意，红色可以包含在渐变中而不是使用背景色： https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

linear-gradient() CSS功能可在两种或多种颜色之间创建线性渐进过渡。其结果是<gradient>数据类型的对象，这是一种特殊的 <image> 。
＆＃13;
＆＃13;
div {
  width: 400px;
  height: 200px;
  border: 1px solid gray; 
  background: linear-gradient(to right, red 70%,black 70%, white) ;
}
＆＃13;
<div>

</div>
＆＃13;
＆＃13;
＆＃13;

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

CSS background 简写属性可让您一次调整所有可用的背景样式选项，包括彩色图像，原点和大小，重复方法和其他功能。 background可用于设置以下一项或多项的值：background-clip，background-color，background-image，background-origin，background-position，{{ 1}}，background-repeat和background-size。

Answer 3

设置背景渐变将覆盖在背景颜色上。因此，如果您只想让屏幕的70％变为红色，则需要将其包含在渐变中。

你的财产没有在js小提琴中呈现的原因是因为你用逗号分隔了背景速记属性的不同部分。因此，如果您确实希望在背景上叠加渐变，则需要删除逗号：

div {

/* other properties of the div here */

background: red linear-gradient(to right, transparent 0%, transparent 70%, rgb(0,0,0) 70%,rgb(255,255,255) 100%);

}

https://jsfiddle.net/0orbjebm/

如果您想要叠加层着色的渐变，只需添加透明度即可。这很好，如果你只是想拥有一个可以覆盖透明度的渐变（我为了美感而改变了序列

div {

  /* other properties of the div here */

  background: red linear-gradient(to right, transparent 0%, transparent 70%, rgba(0,0,0,1) 100%);

}

https://jsfiddle.net/tootz4w8/

在上面的例子中我添加了一个div并为div本身的背景颜色添加了一个内联样式属性，你可以看到我们得到了很好的效果

<div>
<!-- this one will be red and fade to black -->
</div>

<div style="background-color:blue">
<!-- this one will be blue and fade to black -->
</div>

在一个背景CSS属性

3 个答案: