我的旋转木马中有一个背景图像,我正在尝试使用 jQuery 为其添加渐变。
这是我要编辑的元素的 CCS 代码:
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)
这是我尝试过的
jQuery(function(){
jQuery(".sa_hover_container").each(function){
var img = (this).css("background-image");
var newBackground = "linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), "+ img ;
(this).css(background-image,newBackground);
});
});
有可能吗?如果是这样,我做错了什么?
谢谢!
最佳答案
你可以这样试试:
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 文件中,您也可以获取背景的 url。
关于jquery - 是否可以获取现有的 CSS 规则属性,然后使用 jQuery 对其进行编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50605711/