Фоновый градиент цвета и фоновое изображение СУХОЙ

Question

У меня есть несколько заголовков, и на фоне каждого я хочу показать один и тот же цвет градиента, но другое (не повторяющееся) фоновое изображение.Я хочу избежать дублирования каких-либо правил CSS для цвета градиента фона или положения фонового изображения, потому что они будут одинаковыми для каждого заголовка.Другими словами, единственное, что мне нужно указать для отдельного заголовка, - это путь к файлу фонового изображения.

Вот что у меня есть на данный момент:

<h1 class="banner bgImage img1">background image 1</h1>
<h1 class="banner bgImage img2">background image 2</h1>
<h1 class="banner bgImage img3">background image 3</h1>
<h1 class="banner">heading without background image</h1>

.banner {
    /* For old browsers that don't support gradients */
    background-color: #9FCC1D; 

    /* browser-specific prefixes omitted */
    background-image: linear-gradient(#75A319, #9FCC1D); 
    padding: 7px 7px 7px 15px;
}

/* Specifies position of background image */
.bgImage {
    background-position: 5px 50%, 0 0;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.img1 {
    background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D);
}

.img2 {
    background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D);
}

.img3 {
    background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D);
}

Естьпара проблем с этим

1. Я должен повторить стиль linear-gradient в каждом .imgX правиле
2. Он неправильно отображается в Chrome, который не выглядитподдерживать разделенный запятыми список свойств background-image и background-repeat.Это то, что отображается в Chrome

Как исправить проблему с отображением фона в Chrome при минимизации дублирования правил CSS?

Answer 1

Используйте псевдокласс :before для иконок фона.

.img1:before {
  content: '';
  float: left;
  position: relative;
  background: transparent url('img1.png') left top no-repeat;
  width: 16px; /* change to actual width of img */
  height: 16px; /* change to actual height of img */
}

Или, поскольку вы пытаетесь уменьшить количество CSS, вы можете указать класс для градиента и добавить его в свой HTML.

Answer 2

Дон, у вас есть два класса, к которым можно применить этот градиент фона: bgImage и banner. Просто примените свой градиент к одному из этих классов и идите оттуда. Также добавьте repeat-x сразу после URL вашего изображения, чтобы оно повторялось.