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

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