- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 CSS 中有这个:
.body {
width: 150px;
height: 40px;
padding: 20px;
background-color: rgba(255,0,0,1);
text-align: center;
border: 1px solid black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: block;
top: 50px;
font-weight: bold;
font-size: 25px;
}
我想在用户点击按钮时更改 background-color
的不透明度 (alpha
):
<button onclick="lessColour()">-Colour</button>
我如何创建这个 lessColour()
函数,以便每次用户点击按钮时,background-color
的 alpha
减少 0.1
?
顺便说一句,我必须用 3 个不同的元素来做到这一点。
最佳答案
您需要创建一个接受两个参数的函数:
您要更改其background-color
的不透明度的一个或多个元素,以便您可以同时在多个元素中进行更改。
您要更改 alpha
的数量(如果为正则增加,如果为负则减少)。
为了获得当前的 alpha 值,您需要:
使用 getComputedStyle
和 getPropertyValue
获取当前的 background-color
值。
解析该值以仅获取 alpha
组件。
使用 element.style.backgroundColor
更新元素的 background-color
。
总的来说,它看起来像这样:
// First, get all your elements:
const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
// And the buttons to update them:
const decreaseA = document.getElementById('decrease-a');
const decreaseAB = document.getElementById('decrease-ab');
const decreaseABC = document.getElementById('decrease-abc');
const increaseA = document.getElementById('increase-a');
const increaseAB = document.getElementById('increase-ab');
const increaseABC = document.getElementById('increase-abc');
const decreaseAll = document.getElementById('decrease-all');
const increaseAll = document.getElementById('increase-all');
// Define your function:
function updateColor(elements, change) {
// Make sure elements is always an Array, so that you can call the
// function with either an Array of elements or a single one (without
// having to wrap it in an Array yourself.
elements = Array.isArray(elements) ? elements : [elements];
// Process all elements:
elements.forEach(element => {
// Get the current background-color value:
const value = getComputedStyle(element).getPropertyValue("background-color");
// Get all color components (alpha may not be there if = 1):
const parts = value.match(/[\d.]+/g);
// If alpha is not there, add it:
if (parts.length === 3) {
parts.push(1);
}
// Modify alpha:
parts[3] = Math.min(1, Math.max(0, parseFloat(parts[3]) + change));
// Set the element's text to be the current alpha value (just for the example):
element.innerText = parts[3].toFixed(2);
// Apply new value:
element.style.backgroundColor = `rgba(${ parts.join(',') })`;
});
}
// Add event handlers for the buttons that will call the function with the right params:
decreaseA.onclick = () => updateColor(a, -0.1);
decreaseAB.onclick = () => updateColor(b, -0.1);
decreaseABC.onclick = () => updateColor(c, -0.1);
increaseA.onclick = () => updateColor(a, 0.1);
increaseAB.onclick = () => updateColor(b, 0.1);
increaseABC.onclick = () => updateColor(c, 0.1);
decreaseAll.onclick = () => updateColor([a, b, c] , -0.1);
increaseAll.onclick = () => updateColor([a, b, c], 0.1);
// Set the initial text inside each sample without modifying the color (just for the example):
updateColor([a, b, c] , 0);
body {
margin: 0;
font-family: monospace;
}
.samples {
overflow: hidden;
}
.buttons {
overflow: hidden;
border: 2px solid #FFF;
}
span {
float: left;
width: 33.33333333%;
line-height: 100px;
height: 100px;
text-align: center;
}
button {
float: left;
width: 33.33333333%;
background: #000;
color: #FFF;
border: none;
line-height: 32px;
font-family: monospace;
outline: none;
border: 2px solid #FFF;
}
#decrease-all,
#increase-all {
width: 50%;
}
#a { background: rgba(255, 0, 0, 1); }
#b { background: rgba(0, 255, 0, 1); }
#c { background: rgba(0, 0, 255, 1); }
<div class="samples">
<span id="a"></span>
<span id="b"></span>
<span id="c"></span>
</div>
<div class="buttons">
<button id="increase-a">INCREASE A</button>
<button id="increase-ab">INCREASE B</button>
<button id="increase-abc">INCREASE C</button>
<button id="decrease-a">REDUCE A</button>
<button id="decrease-ab">REDUCE B</button>
<button id="decrease-abc">REDUCE C</button>
<button id="increase-all">INCREASE ALL</button>
<button id="decrease-all">REDUCE ALL</button>
</div>
关于javascript - 使用 JS 更改 CSS RGBA 背景颜色的 alpha 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48533565/
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我不知道我问的是否可行。 我有一个带有 Color.BLACK 的 Paint 和 0.2f 的 alpha 和两个对象: 它们都使用相同的Paint。我还测试了 2 个不同的 Paint 对象,仅更
Alpha Vantage API 不提供纳斯达克指数的报价(不再?)。我感兴趣的所有其他 indizes 似乎都很有魅力。 例如,调用以下 URL(隐藏 API key )将提供 S&P 的报价(符
问:有没有办法使用默认管道正确混合 Alpha 分量? 问题:我正在将半透明表面绘制到纹理中,然后我想将该纹理传输到主框架后台缓冲区中。通常,当您使用直接的 Alpha 混合来实现透明度或抗锯齿时,会
如果我有一个底层颜色和一个 alpha 值 (C&A),并且想在屏幕上创建一个自定义 C&A,那么确定必须将什么 C&A 作为底层添加到底层之上的层的函数是什么? 编辑: 我想复制 photoshop
我想知道它们之间的区别: 给我的 UIView 分配一个颜色 <1 alpha vs 为它指定一个不透明的颜色,但给 UIView 一个 <1 的 alpha 值。 在屏幕截图上,我制作了两个 UIV
我在 OSX 10.9.4 上试图转换这个 python 正则表达式 p = "(2024 (?:(?:(?:[a-z|.]+ ?)+)) 93)"到 Unix 正则表达式以提高 grep 的速度。
我为 4 张图像制作了这个脚本,第一张图像是 alpha,但从第二张开始什么都没有显示 这是ffmpeg的代码确实有错误,但我没有。不明白:[swscaler @ 0x7fef79845e00] 使用
我正在尝试将文本绘制到具有特定 Alpha 级别的 Canvas 上,并剪辑文本并使用其自己的 Alpha 级别绘制背景颜色: ctx.globalCompositeOperation = '...'
我需要实现Lasso和Ridge回归,并通过交叉验证的方式计算超参数。我找到了执行此操作的代码,但我不太理解它。 lassocv = LassoCV(alphas=None, cv=15, max_i
我得到我的位图,将它用作着色器平铺模式。 除了要绘制的形状轮廓外,PNG 大部分是 alpha。 除了它画出轮廓,但被黑色包围,不是透明的(alpha)。 pnt.reset(); i
我正在开发一个带有 tableViewController 的应用程序。我想在我的表格 View 单元格下方添加背景图片。我想让表格 View 单元格透明,以便我的整个表格 View 可以具有自定义背
如图所示,我有 2 个具有 0.5 alpha 和 1 alpha 的按钮。我想将第一张图片中标题的 alpha 更改为 1,这可能吗? 到目前为止,我尝试了这些都不起作用: button.title
我正在尝试生成一个 python 正则表达式来表示词法分析器的标识符。我的做法是: ([a-zA-Z]([a-zA-Z]|\d)*) 当我使用它时: regex = re.compile("\s*([
我正在尝试删除所有非数字字符的字符串,并且我已阅读 Why isn't isnumeric working? ,或者我必须有一个 unicode 字符串。然而,自从 is.alnum()和is.alp
来自 hadoop 网站上的发布页面: “This release, like previous releases in hadoop-2.x series is still considered a
真的没有与 setAlpha(int) 对应的 XML 属性吗? 如果没有,有什么替代方案? 最佳答案 它比其他响应更容易。有一个 xml 值 alpha 采用 double 值。 android:a
我正在three.js 中构建一个“ Papercut ”世界。我所有的模型都是简单的“平面”,我使用带有 Alpha channel 的 PNG 对它们进行纹理处理,以将平面修剪成更令人愉悦的形状。
我想知道 Graphics2D.setComposite(..., alpha) 之间是否真的有区别和 Graphics2D.setColor(new Color(..., alpha))在 Java
我需要在两个图像之间进行转换 - 两个图像都是隐藏下面的 Sprite 的蒙版。每个面具的一部分是白色的,一部分是透明的。我需要两个图像的总 alpha 每次都为 1,这样蒙版看起来会平滑地改变其形状
我是一名优秀的程序员,十分优秀!