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

发布于 2025-01-29 19:42:25 字数 580 浏览 4 评论 0原文

我想要什么？

我想操纵具有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属性值，而不是整体值，而是不透明度部分或部分。

原文

What i want?

I want to manipulate a specific part of a css property value with an HTML range input.

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

Let's say i want to change only the alpha (opacity) parts of this css rgba code with my html range input here;

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

Is it a possible thing to manipulate a specific part of a css property value with js? How can i connect this html input element into background-image css property value, not to whole value but the opacity part or parts.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

牵强ㄟ 2025-02-05 19:42:25

以下可能是您尝试做的事情的起点：

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>

The following might serve as a starting point for what you are trying to do:

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>

回复收藏 0 原文

~没有更多了~