背景渐变颜色和背景图像 DRYly

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. 我必须在每个.imgX 规则中重复linear-gradient 样式
2. 它在 Chrome 中无法正确呈现，它似乎不支持background-image 和background-repeat 属性的逗号分隔列表。这是在 Chrome 中显示的内容

如何解决背景在 Chrome 中呈现方式的问题，同时最大限度地减少 CSS 规则的重复？

Answer 1

唐，您有两个可以应用此背景渐变的类，bgImage 和 banner。只需将渐变应用到其中一个类上，然后从那里开始。还要在您的图片网址后面附加repeat-x，以确保它会重复。

Answer 2

使用: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 中。