我可以操作css属性值的特定部分吗?

Question

我想要什么?

我想操作一个特定的部分

/* an example CSS */
.background-img {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(wallpaper.jpg);
}

假设我只想改变这个css rgba代码的alpha(不透明度)部分，我的html范围输入在这里;

<input
class="range-input"
type="range"
min="0"
max="0.999"
value="0.5"
step="0.010"
/>

是一个可能的事情来操纵一个css属性值的特定部分与js?我如何将这个html输入元素连接到background-image css属性值，而不是整个值，而是不透明度部分或部分。

Answer 1

下面的内容可以作为您尝试执行操作的起点:

var input = document.getElementById("range-input");
let root = document.documentElement;
input.onchange = function()
{
root.style.setProperty('--opacity', input.value);
};

:root {
--opacity: 1.0;
}
.background-img {
width: 200px;
height: 100px;
background-size: 200px 100px;
background-image: url(https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024);
opacity: var(--opacity);
}

<input
class="range-input"
id="range-input"
type="range"
min="0"
max="0.999"
value="0.5"
step="0.010"
/>
<div class="background-img"></div>