Почему не комбинируется фоновое изображение и градиент?

Question

[sunnydog]

body {
background-image: url('../images/jellyfish1.png'), linear-gradient(to bottom, black 80%, navy);
background-repeat: no-repeat, repeat;
}

вот код, после того как страница открывается в браузере линейный градиент исчезает. Подскажите, что поправить чтобы под картинкой был градиент?

Comments

[Lynn «Кофеман»]

Так может картинка его загораживает?

[sunnydog]

Алексей Тен: нет, картинка 300х400

Answer 1

[Ankhena]

Куда исчезает? https://jsfiddle.net/kd7xtk0s/

Comments

[sunnydog]

да, из-за сброса стилей было, но не понятно, почему

[Ankhena]

sunnydog: вот пример с вашим сбросом стилей https://jsfiddle.net/b60qz4rw/
все равно все работает

[Сергей delphinpro]

Наверное туда

Градиент ниже картинки. картинка не прозрачная.
Автору наверное надо наоборот, градиент расположить сверху и сделать его полупрозрачным (использовать rgba())

[Ankhena]

Сергей: да вроде нет, судя по комментарию выше. Да и в вопросе написано "Подскажите, что поправить чтобы под картинкой был градиент?"

[Сергей delphinpro]

Ankhena W: Действительно =)
Но тогда какой в этом смысл? Ведь картинка все равно будет перекрывать то что под ней...

[Ankhena]

Сергей: я точно не знаю )))
Может, градиент это кусок футера, а картинка фон для какой-то верхней части.
Но, может быть, все вовсе и не так.

[sunnydog]

Ankhena W: проблема решена. Изначально была опечатка в body, html {
height: 100%;
}
Поэтому все слетало. Спасибо большое за ответы!

[Ankhena]

sunnydog: так обычно и бывает

Answer 2

[Евгений Карпов]

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

Comments

[sunnydog]

stackoverflow.com/questions/2504071/how-do-i-combi...
А как же нововведения css3?

[Евгений Карпов]

sunnydog: нововведения никто не отменял, только о5 таки это не накладываемые эффекты, а скорее исключение, если не загрузилось фоновое изображение, будет показан градиент)

Answer 3

[Алексей Скляров]

Он и должен скрываться. У вас грубо говоря написано следующее: если картинка не загрузилась, показывается градиент. Т.е градиент у вас как подложка под картинку делается. Если вам нужно повесить этот градиент на картинку. То создаете внутри блок и через абсолютное позиционирование накладываете на блок с фото.