我想要的是？
我想使用 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 屬性值，而不是整個值，而是不透明度部分或部分。
uj5u.com熱心網友回復：
以下內容可以作為您嘗試做的事情的起點：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/477161.html
標籤：javascript css dom
上一篇：jsvar沒有得到document.getElementById().value的值
下一篇：如何在不改變焦點的情況下輸入