CSS3渐变和背景图片

我有一个函数，当一个复选框的状态发生变化时，它会切换其父代的类以给出不同的背景渐变。点击Lorem看看它在行动CSS3渐变和背景图片

问题是，它不会在我的例子中的较大的框中工作，因为有一个背景图像为我的元素指定，我知道一个渐变不能存在于背景图像相同的空间。

有没有一种解决方法为此添加背景渐变到元素？我无法将其添加到图像中，因为这将会动态填充，并且并非所有图像都具有相同的尺寸。

我不介意改变任何HTML/CSS。如果可以用jQuery来完成，那太棒了:)

2011-02-25 Kyle

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); 
}

来源

2011-02-25 13:58:14 Tokimon

啊哈，这个作品！现在只需将其添加到jQuery功能:)谢谢。 – Kyle 2011-02-25 14:02:27

更新：我似乎无法设法将其写入复选框更改。我希望我从错误的角度来看待它，我应该设置CSS本身，而不是改变类。但你的答案只要混合图像和渐变，谢谢:) – Kyle 2011-02-25 14:11:40

它应该是可能的只是chaning类。这是推荐做的事情，它给你更多的自由，我造型 – Tokimon 2011-02-26 13:40:43

你可以在背景图像的元素周围添加另一个div，并对其应用渐变。只要图像透明，渐变就会显示出来。

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

来源

2011-02-25 13:51:36

CSS3渐变和背景图片

回答

相关问题