我有一个功能,当复选框的状态发生变化时,它会切换其父级的类以提供不同的背景渐变。单击 Lorem 以查看其运行情况
问题是它在我的示例中无法在较大的盒子上工作,因为为我的元素指定了背景图像,我知道渐变不能存在于与背景图像相同的空间内。
是否有解决方法可以为元素添加背景渐变?我无法将它添加到图像中,因为这将被动态填充,而且并非所有图像的尺寸都相同。
我根本不介意更改任何 HTML/CSS。如果它可以用 jQuery 完成,那也很棒 :)
最佳答案
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);
}
关于jquery - CSS3 渐变和背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5117244/