HTML5是一種用于構建網頁的語言，其中的背景顏色變暗變亮功能十分實用。這種功能可以幫助我們實現網頁的色彩變化效果，從而更好地吸引用戶的注意力。下面，我們來介紹一下HTML5的背景顏色變暗變亮代碼。

<div id="demo">這是一個div元素</div>
<button onclick="changeColor()">點擊變暗背景顏色</button>
<script>
function changeColor() {
var elem = document.getElementById("demo");
var opacity = window.getComputedStyle(elem,null).getPropertyValue("background-color");
opacity = opacity.replace("rgba","").replace("(","").split(",");
opacity = opacity[3].substring(0, opacity[3].length-1);
opacity -= 0.1;
elem.style.backgroundColor = "rgba(0, 0, 0, "+opacity+")";
}
</script>

這段代碼中，我們首先創建了一個div元素，并設置了其ID為demo。然后，我們在該元素下方放置了一個按鈕。當用戶點擊該按鈕時，會觸發一個名為changeColor的函數。

在該函數中，我們首先獲取到了demo元素的背景顏色。為了實現變暗的效果，我們需要將其轉換為RGBA格式，并將透明度降低0.1。然后，我們將新的顏色值設置為demo元素的背景色，并完成顏色的變化。

總的來說，HTML5的背景顏色變暗變亮功能非常實用。通過上述的代碼，我們可以方便地實現網頁背景顏色變化的效果，從而提升用戶體驗和頁面吸引力。