Какой правильный сокращенный синтаксис при использовании нескольких фоновых изображений/градиентов css?

Мне нужно прикрепить несколько элементов к элементу через CSS, и я не могу использовать :before/:after.

Мне интересно, какой правильный синтаксис использовать несколько фоновых изображений CSS.

Существует несколько предложенных способов, например здесь или здесь, но я не могу получить ни одного из них:

background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF;
background: url(…) 600px 10px no-repeat, url(…) 10px 10px no-repeat;

для работы.

Это то, что у меня есть:

background-image: rgba(0, 0, 0, 0.4) url("img/icons-18-white.png") no-repeat 0% 50%,linear-gradient( #9ad945, #7eb238 );

который игнорируется. Только когда я поставляю чистый URL-адрес, он работает:

background-image: url("img/icons-18-white.png") , linear-gradient( #9ad945, #7eb238 );

Вопрос:
Я специально ищу способ установить background-size/position/repeat для каждого изображения, поэтому, если кто-то может указать мне на правильный синтаксис, было бы очень приятно!

ИЗМЕНИТЬ: Добавив scroll и заменив background-image на background

background: rgba(0, 0, 0, 0.4) url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png") no-repeat scroll 0% 50%, linear-gradient( #9ad945, #7eb238 );

не работает.

ОТВЕТЫ

Ответ 1

Существуют две основные проблемы с тем, что у вас есть, что мешает ему работать:

  • Условное свойство background, а не background-image.

  • Цвет фона, который в вашем случае rgba(0, 0, 0, 0.4), должен быть указан последним.

Если строковый синтаксис заканчивается слишком запутанным, вы всегда можете отдельно установить отдельные свойства, передавая им одинаковое количество разделенных запятыми значений, соответствующих количеству фоновых слоев (градиенты CSS считаются изображениями). Однако если вы установите background-color, вы можете указать его только один раз.

Помните, что при указании нескольких фонов порядок, в котором они отображаются, сначала продержится, сверху вниз. Вот почему цвет, как ожидается, будет последним в сокращенной декларации. Этот раздел спецификации описывает его, а этот раздел содержит полный синтаксис:

Значение: [ <bg-layer> , ]* <final-bg-layer>

Где

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} 

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>

Подробности о расслоении в отдельных свойствах можно найти в соответствующих разделах.

Если вы пытаетесь наложить фоновый рисунок на цвет rgba(), возможно, вам не удастся добавить градиент под этим слоем, не применяя вместо этого градиент к :before. Альтернативно, если вы смешаете 40% черный цвет с ограничителем градиента, вы можете удалить цвет rgba(), оставив только графику и градиент.