Question

我有一个功能，当复选框的状态发生变化时，它会切换其父级的类以提供不同的背景渐变。点击Lorem以查看它的实际效果

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

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

我根本不介意更改任何HTML / CSS。如果可以使用jQuery完成，那也很棒：）

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

Answer 2

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

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

CSS3渐变和背景图像

2 个答案: