Jeśli użytkownik aktywuje pole wyboru przeźroczystości, Widget zostaje wyrenderowany w buforze offscreen, a następnie skopiowany na ekran. Jest to skutkiem niskiego tempa odświeżania zawartości Widgetu. Weź to pod uwagę przy tworzeniu Widgetów.

Weź pod uwagę, że nie działa to z silnikiem renderującym „Chromium”. Musisz wyłączyć ten przełącznik, aby obsłużyć przeźroczystość.

Aby włączyć przeźroczystość tła w Twoim Widgetu, po prostu dodaj następujący CSS do kodu Widgetu.

CSS przeźroczystości

html, body {
        background-color: transparent;
}

Dla Simple Clock, zmodyfikuj kod Widgetu w następujący sposób:

index.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
          html, body {
        background-color: transparent;
      }
</style>
<script>

var use_seconds = true;

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = 0
    m = checkTime(m);
    txtEl = document.getElementById('txt')

    if (use_seconds) {
        s = today.getSeconds();
        s = checkTime(s);
        txtEl.innerHTML = h + ":" + m + ":" + s;
    }
    else {
        txtEl.innerHTML = h + ":" + m;
    }
    window.t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function init_widget(config) {
        if (!config) {
            return;
        }
        if("clock_font_size" in config){
            var pixels = config.clock_font_size + "px"
            document.getElementById('txt').style.fontSize = pixels;
        }
        if("use_seconds" in config){
            use_seconds = config.use_seconds;
        }
}

function start_widget(){
    startTime()
}

function stop_widget(){
    if(window.t){
        clearTimeout(window.t);
    }
}

</script>
</head>

<body>

<div id="txt" style="font-size: 48px"></div>

</body>
</html>