我可以操纵 css 属性值的特定部分吗？

Question

我想要什么？

我想使用 HTML 范围输入来操作 css 属性值的 特定部分 。

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

假设我只想用我在此处输入的 html 范围更改此 css rgba 代码的 alpha（不透明度）部分；

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

是否可以用 js 操作 css 属性值的特定部分？我如何将这个 html 输入元素连接到背景图像 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>

我可以操纵 css 属性值的特定部分吗？

Can i manipulate a specific part of a css property value?

javascript

css

dom

我可以操纵 css 属性 值的特定部分吗？

Can i manipulate a specific part of a css property value?

javascript

css

dom

我可以操纵 css 属性值的特定部分吗？