title: RGB颜色值&RGBA颜色值
date: 2023-11-6
categories:
- 技术
tags:
- HTML
RGB颜色
在 HTML 中，可以使用以下公式将颜色指定为 RGB 值：
rgb(red, green, blue)
每个参数（红色、绿色和蓝色）都定义为颜色的强度，其值介于0 - 255之间
于是一共有256 x 256 x 256=16777216种可能的颜色。
<script>
function changeRGB() {
const red = document.getElementById("slideRed").value;
const green = document.getElementById("slideGreen").value;
const blue = document.getElementById("slideBlue").value;
const rgbResult = document.getElementById("rgbresult");
const rgbResultText = document.getElementById("rgbresulttext");
rgbResult.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
rgbResultText.textContent = `rgb(${red}, ${green}, ${blue})`;
// You can also update the RGBA color block if needed
updateRGBA(red, green, blue);
// Update the numeric value below the slider
document.getElementById("valRed2").textContent = red;
document.getElementById("valGreen2").textContent = green;
document.getElementById("valBlue2").textContent = blue;
}
function changeRGBA() {
const red = document.getElementById("slideRedA").value;
const green = document.getElementById("slideGreenA").value;
const blue = document.getElementById("slideBlueA").value;
const alpha = document.getElementById("slideAlphaA").value / 10; // Convert alpha to a decimal value
const rgbaResult = document.getElementById("rgbaresult");
const rgbaResultText = document.getElementById("rgbaresulttext");
rgbaResult.style.backgroundColor = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
rgbaResultText.textContent = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
// Update the numeric value below the slider
document.getElementById("valRed2A").textContent = red;
document.getElementById("valGreen2A").textContent = green;
document.getElementById("valBlue2A").textContent = blue;
document.getElementById("valAlpha2A").textContent = alpha;
}
function updateRGBA(red, green, blue) {
const alpha = document.getElementById("slideAlphaA").value / 10; // Convert alpha to a decimal value
const rgbaResult = document.getElementById("rgbaresult");
const rgbaResultText = document.getElementById("rgbaresulttext");
rgbaResult.style.backgroundColor = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
rgbaResultText.textContent = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
// Update the numeric value below the slider
document.getElementById("valRed2A").textContent = red;
document.getElementById("valGreen2A").textContent = green;
document.getElementById("valBlue2A").textContent = blue;
}
</script>
rgb(255, 99, 71)
RED
255
GREEN
99
BLUE
71
RGBA颜色
RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展（增加了一个参数用来指定颜色的不透明度）
RGBA 颜色值指定为：
rgba(red, green, blue, alpha)
alpha 参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字
rgba(255, 99, 71, 0.5)
RED
255
GREEN
99
BLUE
71
ALPHA
0.5
没有评论:
发表评论