javascript 如何用root更改css背景图像

avwztpqn  于 2022-10-30  发布在  Java
关注(0)|答案(3)|浏览(261)

我有一个CSS变量
--图像-电子邮件:图片/电子邮件_灯光. png;
在CSS中,我有

.image_email {
    height: 105px;
    width: 105px;
    background-image: url(var(--image-email));
}

这是不工作,我想知道是否有一种方法来改变一个图像与根或我必须尝试js?

brvekthn

brvekthn1#

你需要用函数url()设置为根值。是的,你可以不使用JS来更改图像,只需在另一个类中重写初始url。example

CSS格式

:root {
  --image-email: url('pictures/email_light.png');
}

.new-image {
  --image-email: url('pictures/email_light-new.png');
}

.image_email {
  height: 500px;
  width: 500px;
  background-image: var(--image-email);
}

第一个

7ajki6be

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)

8yparm6h

8yparm6h3#

对于那些想用base64编码图片替换CSS背景的人来说,这里有一个包括一些主题切换的想法

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

相关问题