Имейте в виду, что CSS-градиент на самом деле является значением изображения , а не значением цвета, как некоторые могут ожидать. Следовательно, он соответствует background-image конкретно, а не background-color или всей сокращенной записи background.
По сути, вы действительно пытаетесь наложить на слои два фоновых изображения: растровое изображение поверх градиента. Для этого вы указываете их обоих в одном объявлении, разделяя их запятыми. Сначала укажите изображение, а затем градиент. Если вы укажете цвет фона, этот цвет всегда будет закрашен под самым нижним изображением, что означает, что градиент будет хорошо покрывать его, и он будет работать даже в случае отступления.
Поскольку вы включаете префиксы вендоров, вам придется делать это один раз для каждого префикса, один раз для без префиксов и один раз для аварийного (без градиента). Чтобы избежать необходимости повторения других значений, используйте сокращенные свойства 1 вместо сокращения background:
#mydiv .isawesome {
background-color: #B1B8BD;
background-position: 0 0;
background-repeat: no-repeat;
/* Fallback */
background-image: url('../images/sidebar_angle.png');
/* CSS gradients */
background-image: url('../images/sidebar_angle.png'),
-moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background-image: url('../images/sidebar_angle.png'),
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
background-image: url('../images/sidebar_angle.png'),
linear-gradient(to bottom, #ADB2B6, #ABAEB3);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ADB2B6', endColorstr='#ABAEB3', GradientType=0);
}
К сожалению, это не работает правильно в IE, поскольку он использует filter для градиента, который он всегда рисует над фоном.
Чтобы обойти проблему IE, вы можете поместить filter и фоновое изображение в отдельные элементы. Тем не менее, это устранит мощь CSS3 с несколькими фонами, поскольку вы можете просто создавать слои для всех браузеров, но это компромисс, который вам придется сделать. Если вам не нужно поддерживать версии IE, которые не поддерживают стандартизированные CSS-градиенты, вам не о чем беспокоиться.
1 Технически, объявления background-position и background-repeat применяются здесь к обоим слоям, потому что пропуски заполняются повторением значений вместо фиксированных, но поскольку background-position является его начальное значение и background-repeat не имеют значения для градиента, охватывающего весь элемент, это не имеет большого значения. Подробности того, как обрабатываются слоистые фоновые объявления, можно найти здесь .