我如何使用CSS3渐变来处理我的background-color，然后应用background-image来应用某种透光纹理？

多种背景！

这两行是任何不进行渐变的浏览器的回退。请参见下面的注释，仅用于堆叠图像。

• 第1行设置平面背景色。
• 第2行设置背景图像回退。

最后一行为可以处理它们的浏览器设置背景图像和渐变。

• 第3行适用于所有相对现代的浏览器。

几乎所有当前的浏览器都支持多个背景图像和CSS背景。有关浏览器支持，请参见http://caniuse.com/feat=css渐变。有关不需要多个浏览器前缀的原因，请参阅http://codepen.io/thebabydino/full/pjxvwp。/

层堆栈

应该注意的是，第一个定义的图像将是堆栈中最顶层的。在这种情况下，图像位于渐变的顶部。

有关背景分层的详细信息，请参见http://www.w3.org/tr/css3 background/分层。

仅对ie<9的图像进行叠加(声明中没有渐变)

IE9和更高版本可以以同样的方式堆叠图像。你可以用这个为IE9创建一个渐变图像，虽然我个人不这么认为。但是需要注意的是，当只使用图像时，ie<9会忽略fallback语句，不会显示任何图像。当包含渐变时，不会发生这种情况。在这种情况下，要使用单个回退图像，我建议使用Paul Irish出色的条件HTML元素和回退代码：

背景位置、尺寸等。

适用于单个图像的其他属性也可以是逗号分隔的。如果只提供1个值，则该值将应用于所有叠加图像，包括渐变。background-size: 40px;将图像和渐变都限制在40px的高度和宽度。然而，使用background-size: 40px, cover;将使图像40px，并且梯度将覆盖元素。要仅将设置应用于一个图像，请为另一个图像设置默认值：background-position: 50%, 0 0;或支持它的浏览器使用initial：background-position: 50%, initial;。

您也可以使用背景速记，但是这会删除回退颜色和图像。

同样适用于背景位置、背景重复等。

如果还想为图像设置背景位置，则可以使用：

或者您也可以创建较少的混合(引导样式)：

要认识到的一点是，第一个定义的背景图像是堆栈中的最顶层。最后定义的图像将是最底部的。这意味着，要在图像后面有背景渐变，您需要：

您还可以为图像定义背景位置和背景大小。我写了一篇关于可以用CSS3渐变做一些有趣的事情的博客文章

您可以简单地键入：

我的解决方案：

我有一个实现，我需要在这个实现中更进一步，并想概述我的工作。下面的代码做了同样的事情，但使用了沙司，波旁威士忌和一个形象雪碧。

Sass和Bourbon负责跨浏览器代码，现在我只需要声明每个按钮的sprite位置。对于按钮的活动状态和悬停状态，很容易扩展此原则。

我总是使用下面的代码使其工作。有一些注意事项：

这项技术与我们这里描述的多个背景图像相同。

下面是我创建的一个mixin，用于处理人们可能喜欢使用的所有内容：

可以这样使用：

希望你们觉得这有帮助。

感谢@gidgodonihah找到初始解决方案。

我也在做同样的事情。虽然背景色和背景图像存在于一个对象内的不同层上——这意味着它们可以共存——但CSS渐变似乎会与背景图像层共存。

据我所知，边界图像似乎比多个背景具有更广泛的支持，所以这可能是一种替代方法。

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

更新：更多的研究。似乎Petra Gregorova在这里工作了——>http://petra gregorova.com/demos/css-gradient-and-bg-image-final.html

如果下载背景图像时出现奇怪的错误，请使用W3C链接检查器：https://validator.w3.org/checklink

以下是我使用的现代混音器(学分：psa：不要使用渐变生成器)：

如果您希望将图像完全融合在一起，而不希望由于单独的HTTP请求而单独加载元素，那么请使用此技术。这里，我们在同时加载的同一个元素上加载两个东西……只需确保先将预渲染的32位透明PNG图像/纹理转换为base64字符串，然后在背景图像CSS调用中使用它。我使用这种技术将晶圆状纹理与标准的rgba透明度/线性渐变css规则融合在一起。比分层多个艺术和浪费HTTP请求更好，这对移动不利。

我想做的跨度按钮与背景图像，背景梯度组合。

http://enjoycss.com/帮助完成了我的工作任务。只有我必须删除一些自动生成的附加CSS。但这是一个非常好的网站，建立你的划痕工作。

对于我的响应式设计，我的下拉框在框的右侧箭头(垂直手风琴)，接受百分比作为位置。最初，向下箭头是"position:absolute；right:13px；"。在97%的定位下，它的魅力如下：
< BR>

另外，对不起，不知道如何处理过滤器。

我用那种方法解决了这个问题。我在HTML中定义渐变，在正文中定义背景图像

如果您必须让渐变和背景图像在IE 9中一起工作(HTML 5&HTML 4.01 Strict)，请将以下属性声明添加到您的CSS类中，它应该做到这一点：

请注意，您使用了filter属性，并且在用分号关闭属性值之前，有两个progid:[val]实例用逗号分隔。这是小提琴。还请注意，当您查看小提琴时，渐变会延伸到圆角之外。我没有办法解决另一个不用圆角的问题。另外请注意，当在src[image_url]属性中使用相对路径时，该路径是相对于文档页而不是CSS文件的(请参见源代码)。

这篇文章(http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/)引导我找到了这个解决方案。它对IE特定的CSS3非常有用。

作为一种可靠的方法，您只需在您的css中制作一个背景图像，即500x5像素：

其中，xxxxxx对应于与最终渐变颜色匹配的颜色。

你也可以把它固定在屏幕的底部，让它与初始的渐变色相匹配。