ел бы объединить сплошной цвет и градиент в одномbackground Атрибут CSS. Затем я хочу, чтобы эти два фона имели отдельные параметры размера и положения, указанные в отдельномbackground-position а такжеbackground-size атрибуты для того, чтобы поставить эти два фона рядом друг с другом.

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>

Я ожидаю, что это будет выглядеть так:

Однако Chrome сообщает, что свойство background имеет недопустимое значение:

Я не понимаю, почему.

Я пытался найти похожие ответы в Stack Overflow / google, но большинство из них касаются сочетания цвета с изображением, что, похоже, отличается от того, что рассматривается как «один фон». В моем случае я хочу, чтобы цвет и градиент были «двумя фонами» с отдельными размерами / позициями.

Я не хочу включать сплошной цвет в градиент (что было бы возможно в этом примере) по двум причинам:

В конце концов, градиент должен поворачиваться, но граница между двумя фонами должна оставаться вертикальной.Позиция / размер должны быть анимированы при переходе (соотношение 70% / 30% должно быть изменено при наведении), что невозможно сделать с помощью одиночных градиентных остановок.

Мой текущий обходной путь, который я не могу поверить, что он здесь действительно необходим, - это обернуть сплошной цвет в градиент с одинаковым начальным и конечным цветами. Вроде некрасиво, и я уверен, что есть более простой способ ...