背景渐变颜色和背景图像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规则的重复？

- Dónal

---

在我的Chrome 17.0.963.56 m中（使用-webkit-前缀），它对我很好用。 - juanrpozo

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中。

- Nick Beranek

---

我希望不需要使用太多的CSS来为每个标题指定不同的背景图片。 - Dónal

为您的渐变指定一个类。在您的HTML中添加该类。 - Nick Beranek

@juanrpozo 你需要指定父元素的高度：.bgImage { height: 48px; } - Nick Beranek

这个解决方案使用了更简洁的CSS样式表：http://jsfiddle.net/jcBDn/ - 同时浮动效果也更好。 - juanrpozo

@juanrpozo 如果您以此作为答案发布，我将接受并授予您赏金。 - Dónal

@唐，实际上这是尼克的想法，我只是很好奇看它在实践中的表现，所以我将其发布为评论。 - juanrpozo

Answer 2

Don，您有两个可以应用此背景渐变的类，bgImage和banner。只需将渐变应用于其中一个类，并从那里开始。还要在图像URL之后添加repeat-x以确保它会重复出现。

- Robert Guilfoyle