Резервный вариант для нескольких фоновых изображений css3?

Question 1

У меня есть 2 изображения в качестве фона моего тела:

background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

Я обнаружил, что для того, чтобы показать upper_bg.png над изображением bg.png, мне нужно было поместить его на первое место в списке. Однако для браузеров, которые не поддерживают несколько фонов, я бы хотел показать только bg.png, я обеспокоен тем, что браузер переключается на upper_bg.png в качестве запасного варианта вместо bg.png. Как я могу исправить эту проблему?

css background background-image

12

Ilja 2 Фев 2013 в 16:46

Answer

Просто добавьте объявление background только с bg.png до того, как это должны сделать несколько фонов:

background: url(../img/bg.png) repeat;
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

Старые браузеры игнорируют вторую строку и сохраняют первую строку; им вообще не следует пытаться использовать какую-либо часть второй строки. Браузеры, которые поддерживают несколько фонов, будут использовать вторую строку вместо первой, переопределив ее как обычно.

21

BoltClock 2 Фев 2013 в 16:49

Может ли это сработать для резервных изображений, для которых изображение недоступно? (например, изображения профиля с резервным силуэтом, хотя использование 404 во время регулярной обработки, вероятно, не является каноном)

–

rookie1024

15 Ноя 2014 в 02:34

Был бы дополнительный запрос, если бы у нас было другое изображение для запасного варианта?

–

nickspiel

20 Ноя 2014 в 00:34

@ rookie1024: К сожалению, нет. IIRC есть другое предложение по предоставлению резервных копий в случае недоступности изображений, которое потребует другого синтаксиса, который не полагается на каскадирование, поскольку каскадирование - это совершенно другая концепция.

–

BoltClock

23 Ноя 2014 в 09:52

@nickspiel: браузер запрашивает только те изображения, которые он использует. Итак, в моем ответе, если браузер поддерживает несколько изображений, он не будет запрашивать bg.png во второй раз.

–

BoltClock

23 Ноя 2014 в 09:53

Поддержка нескольких фоновых изображений на удивление хороша, даже IE9 поддерживает ее! caniuse.com/#search=multiple%20background

–

Jeremy Thille

11 Май 2016 в 10:27

Question 2

Просто добавьте объявление background только с bg.png до того, как это должны сделать несколько фонов:

background: url(../img/bg.png) repeat;
background: url(../img/upper_bg.png) 0 495px repeat-x, url(../img/bg.png) repeat;

Старые браузеры игнорируют вторую строку и сохраняют первую строку; им вообще не следует пытаться использовать какую-либо часть второй строки. Браузеры, которые поддерживают несколько фонов, будут использовать вторую строку вместо первой, переопределив ее как обычно.

21

BoltClock 2 Фев 2013 в 16:49

Может ли это сработать для резервных изображений, для которых изображение недоступно? (например, изображения профиля с резервным силуэтом, хотя использование 404 во время регулярной обработки, вероятно, не является каноном)

–

rookie1024

15 Ноя 2014 в 02:34

Был бы дополнительный запрос, если бы у нас было другое изображение для запасного варианта?

–

nickspiel

20 Ноя 2014 в 00:34

@ rookie1024: К сожалению, нет. IIRC есть другое предложение по предоставлению резервных копий в случае недоступности изображений, которое потребует другого синтаксиса, который не полагается на каскадирование, поскольку каскадирование - это совершенно другая концепция.

–

BoltClock

23 Ноя 2014 в 09:52

@nickspiel: браузер запрашивает только те изображения, которые он использует. Итак, в моем ответе, если браузер поддерживает несколько изображений, он не будет запрашивать bg.png во второй раз.

–

BoltClock

23 Ноя 2014 в 09:53

Поддержка нескольких фоновых изображений на удивление хороша, даже IE9 поддерживает ее! caniuse.com/#search=multiple%20background

–

Jeremy Thille

11 Май 2016 в 10:27

Резервный вариант для нескольких фоновых изображений css3?

1 ответ

Похожие вопросы

Новые вопросы

css