背景渐变颜色和背景图像干燥

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中无法正确呈现，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

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