我也是这么想的。虽然背景-颜色和背景-图像存在于对象内的单独层中——这意味着它们可以共存——但CSS渐变似乎利用了背景-图像层。

据我所知，border-image似乎比多背景有更广泛的支持，所以这可能是一种替代方法。

http://articles.sitepoint.com/article/css3-border-images

更新:更多的研究。看来佩特拉·格里戈罗娃在这里有东西在工作> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

对于我的响应式设计，我的下拉框在框的右侧(垂直手风琴)，接受百分比作为位置。最初，下箭头是“位置:绝对;右:13 px;”。在97%的定位下，它的工作原理如下:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

附注:对不起，我不知道如何处理滤镜。

我有一个实现，我需要把这个技术更进一步，并想概述我的工作。下面的代码做同样的事情，但使用SASS、Bourbon和一个图像精灵。

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS和Bourbon负责跨浏览器代码，现在我所要声明的就是每个按钮的精灵位置。很容易将此原则扩展到按钮的活动状态和悬停状态。

如果你也想为你的图像设置背景位置，那么你可以使用这个:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

或者你也可以创建一个LESS mixin (bootstrap风格):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

我的解决方案:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

使用背景-混合模式和rgba混合背景图像和颜色

这是你需要的:

.myblendedbg {
  background-image: url("some_image.png");
  background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */
  background-blend-mode: multiply;
}

如果你调整rgba颜色值的alpha值(在这个例子中是。85)，你可以控制透明度。

此外，背景-混合模式还有其他值，你可以用它来获得一些真正有创意的结果。

注:background-blend-mode: color;在火狐浏览器上不能运行，而multiply在所有现代浏览器上都可以运行