//declare an object for your themes - so that the values can easily switched
var myTheme: {
dark: {
'img-magnifier': 'data:image/png;base64,iVBORw....=='
},
regular: {
'img-magnifier': 'data:image/png;base64,iVBORw....=='
}
}
let themeMode = config.darkMode ? 'dark' : 'regular';
//we just gonna take the values from the correct object (dark or regular?)
$(':root').css({'--img-magnifier': 'url(' +myTheme[themeMode]['img-magnifier'] +')'});
//from up to here - this DOM element/value is been stored in root and can be taken from any CSS
/* CSS - this is the part in your CSS */
.myImageMagnifier {
background-image: var(--img-magnifier) !important;
}
.someOtherPic {
background-image: var(--img-magnifier);
}
3条答案
按热度按时间brvekthn1#
你需要用函数
url()
设置为根值。是的,你可以不使用JS来更改图像,只需在另一个类中重写初始url。exampleCSS格式
第一个
7ajki6be2#
添加到nice answer来自@'下快速执行'
如何更改background-img的两种方法:
1.添加/删除课程(@'下一个快速执行):
.style.setProperty("--image-email", "url('https://....')")
1.setProperty(直接在JS中设置CSS变量):
.style.setProperty("--image-email", "url('https://....')")
个尝试并运行代码段:
第一个
更多详情,请访问MDN Using CSS custom properties (variables)
8yparm6h3#
对于那些想用base64编码图片替换CSS背景的人来说,这里有一个包括一些主题切换的想法