CSS3渐变和背景图片

Question

我有一个函数，当复选框的状态改变时，它会切换其父元素的类以给出不同的背景渐变效果。点击Lorem以查看其效果。

您可以在这里查看：http://jsfiddle.net/Kyle_Sevenoaks/f3PZv/。

问题是，在我的示例中，它无法在较大的框上工作，因为为我的元素指定了背景图像，我知道渐变不能存在于与背景图像相同的空间中。

是否有解决此问题的方法来向元素添加背景渐变？我无法将其添加到图像中，因为这将是动态填充的，并且并非所有图像的尺寸都相同。

我完全不介意更改任何HTML/CSS。如果可以使用jQuery完成，那就太好了 :)

- Kyle

Answer 1

CSS 3中的渐变实际上只是一张生成的图片。因此，如果您的浏览器支持多个背景（使用Modenizr进行测试），那么您可以添加2个背景图像。例如：

.multiplebgs.cssgradients .button {
    background-image: url("img.png"), -webkit-gradient(linear, left top, left bottom, from(rgba(247,148,34,0)), to(#dc7703));
    background-image: url("img.png"), -webkit-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
    background-image: url("img.png"), -moz-linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
    background-image: url("img.png"), linear-gradient(-90deg, rgba(247,148,34,0), #dc7703);
}

- Tokimon

---

啊哈，这个可行！现在只需要将它添加到jQuery功能中 :) 谢谢。 - Kyle

更新：我似乎无法将其写入复选框更改中。我认为我可能从错误的角度来处理它，我应该直接设置CSS本身，而不是更改类。但是您的答案在混合图像和渐变方面起作用，谢谢 :) - Kyle

只需更改类即可实现。这是建议的做法，它为您在样式方面提供了更多的自由。 - Tokimon

Answer 2

您可以在具有背景图像的元素周围添加另一个 div，并将渐变应用于该元素。只要图像是透明的，渐变就会显示出来。

<div id="div-with-gradient">
    <div id="div-with-image">
        <!-- content -->
    </div>
</div>

- David Fullerton