如何改变一个CSS背景图像与根

Question

我有一个css var

——image-email:图片/email_light.png;

CSS中是

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

不能工作我想知道是否有办法改变一个图像与根或我必须尝试js?

Answer 1

需要设置为url()函数的根值。是的，你可以在没有JS的情况下改变图像，只需要在另一个类中重写初始url。示例

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root {
--image-email: url('https://plchldr.co/i/100x100?&bg=%22edffab%22&fc=%222b3d41%22&text=100x100');
}
.another-image {
--image-email: url('https://plchldr.co/i/100x100?&bg=89608E&fc=fff&text=100x100');
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.image_email {
height: 100px;
width: 100px;
background-image: var(--image-email);
}

<div class="image_email"></div>
<div class="image_email another-image"></div>

Answer 2

添加到来自@ЖнецЪ的漂亮答案

如何改变background-img:

1. 添加/删除类(@ЖнецЪ):
   .classList.add('another-image')
2. setProperty(在JS中直接设置CSS变量):
   .style.setProperty("--image-email", "url('https://....')")

Try andRun代码段:

// Option 1
function option1Y() {
document.getElementById('sample_box_1').classList.remove('another-image');
document.getElementById('button_1_yellow').disabled = true;
document.getElementById('button_1_purple').disabled = false;
};
function option1P() {
document.getElementById('sample_box_1').classList.add('another-image');
document.getElementById('button_1_yellow').disabled = false;
document.getElementById('button_1_purple').disabled = true;
};
// Option 2
function option2Y() {
document.getElementById('sample_box_2').style.setProperty("--image-email", "url('https://plchldr.co/i/100x100?&bg=%22edffab%22&fc=%222b3d41%22&text=100x100')");
document.getElementById('button_2_yellow').disabled = true;
document.getElementById('button_2_purple').disabled = false;
};
function option2P() {
document.getElementById('sample_box_2').style.setProperty("--image-email", "url('https://plchldr.co/i/100x100?&bg=89608E&fc=fff&text=100x100')");
document.getElementById('button_2_yellow').disabled = false;
document.getElementById('button_2_purple').disabled = true;
};

:root {
--image-email: url('https://plchldr.co/i/100x100?&bg=%22edffab%22&fc=%222b3d41%22&text=100x100');
}
.another-image {
--image-email: url('https://plchldr.co/i/100x100?&bg=89608E&fc=fff&text=100x100');
}
body {
text-align: center;
}
table {
width: 100%;
}
button {
margin: 1em;
color: blue;
}
button:disabled {
color: gray;
}
.image_email {
height: 100px;
width: 100px;
margin: 1em calc(50% - 50px);
background-image: var(--image-email);
}

<h1>Changing CSS variables<br>(custom properties):</h1>
<table>
<tr>
<td>
<h3>by adding / removing a Class in JS:</h3>
<p>.classList.add('another-image')</p>
<button id='button_1_yellow' onclick="option1Y()" disabled>Yellow</button>
<button id='button_1_purple' onclick="option1P()">Purple</button>
<div id='sample_box_1' class="image_email"></div>
</td>
<td>
<h3>by setting CSS variables directly in JS:</h3>
<p>.style.setProperty("--image-email", "url('https://....')")</p>
<button id='button_2_yellow' onclick="option2Y()" disabled>Yellow</button>
<button id='button_2_purple' onclick="option2P()">Purple</button>
<div id='sample_box_2' class="image_email"></div>
</td>
</tr>
</table>

使用CSS自定义属性(变量)

Answer 3

对于那些想用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);
}