Сочетание градиента css3 с фоновым изображением

Я пытался сделать эту работу, используя эту ссылку. Все же это, кажется, не делает трюк. Я что-то пропустил? Мне просто нужен еще один взгляд на это. Спасибо.

Фоновое изображение показывает, но не градиент. Вот скрипка, чтобы показать вам, что я имею в виду.

Что я делаю неправильно?

  background: #23458E;
  background-image: url('/static/images/grey.png'); /* fallback */
  background-image: url('/static/images/grey.png'), -webkit-gradient(linear, left top, left bottom, from(#23458E), to(#2661A8)); /* Saf4+, Chrome */
  background-image: url('/static/images/grey.png'), -webkit-linear-gradient(top, #23458E, #2661A8); /* Chrome 10+, Saf5.1+ */
  background-image: url('/static/images/grey.png'),    -moz-linear-gradient(top, #23458E, #2661A8); /* FF3.6+ */
  background-image: url('/static/images/grey.png'),     -ms-linear-gradient(top, #23458E, #2661A8); /* IE10 */
  background-image: url('/static/images/grey.png'),      -o-linear-gradient(top, #23458E, #2661A8); /* Opera 11.10+ */
  background-image: url('/static/images/grey.png'),         linear-gradient(top, #23458E, #2661A8); /* W3C */

1 ответ

Решение

Изображение полностью непрозрачно, поэтому, поскольку оно указано до градиента, оно покрывает градиент.

И ваше изображение, и градиент полностью непрозрачны, поэтому неясно, что именно вы пытаетесь достичь с ними обоими. Объяснение вашей проблемы - лучшее, что я могу предложить на данный момент.

Другие вопросы по тегам