Question

我的旋转木马中有背景图像，我正在尝试使用jQuery为其添加渐变。

以下是我正在尝试编辑的元素的CCS代码：

write

这是它最终应该如何（添加渐变后）

element.style {
padding: 5% 5%;
margin: 0px 0%;
background-image: url(myImgUrl);
background-position: left top;
background-size: contain;
min-height: 427px;
}

这是我试过的

background-image: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1))+ url(myImgUrl)

甚至可以吗？如果是的话，我做错了什么？

谢谢！

Answer 1

您可以尝试这种方式：

jQuery(function(){

    jQuery(".sa_hover_container").each(function){

        var imgStyle = this.currentStyle || window.getComputedStyle(this, false),
        var bgImage = imgStyle.backgroundImage.slice(4,-1);
        var newBackground = "linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), " + bgImage;

        jQuery(this).css(background-image,newBackground);

    });

});

通过这种方式，即使在CSS文件中定义，也可以获得背景网址。

Answer 2

首先修复你的JS代码

jQuery(function(){
    jQuery(".sa_hover_container").each(function() {
        var img = jQuery(this).css("background-image");
        var newBackground = "linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), "+ img;
        jQuery(this).css("background-image",newBackground);
    });
});

是否可以获取现有的CSS规则属性，而不是使用jQuery进行编辑

2 个答案: