Плавный вывод прозрачного фона

Question

Я просто пытаюсь найти способ использовать анимацию HTML5 с быстрым выводом в приложении для iOS, но не могу отбросить серый фон. Я думал, что это будет способ добавить анимацию и обойти проблемы хранения при использовании png на сетчатке iPad. Теперь я не могу сделать фон ясным. Что я должен делать?

Answer 1

В коде, который сгенерировал Swiffy, найдите backgroundColor и удалите его, включая его значение.

Answer 2

Попробуйте найти элемент со сплошным фоном и динамически изменить его на прозрачный, например:

document.getElementById('swiffycontainer').childNodes[1].style.background = "rgba(255, 255, 255, 0)";

или никому

document.getElementById('swiffycontainer').childNodes[1].style.background = "none";

Answer 3

Добавьте это к вашему CSS или что-то подобное.

#containerdivid svg > g > g > rect {
    display: none;
}

Answer 4

Удаление элемента backgroundColor: не работало до тех пор, пока я не обнаружил, что Google нарушил эту возможность в текущей версии среды выполнения Swiffy. Если вы также измените:

SRC ="https://www.gstatic.com/swiffy/v5.2/runtime.js"

в

SRC ="https://www.gstatic.com/swiffy/v5.1/runtime.js"

вверху файла вы обнаружите, что прозрачный фон работает правильно (хотя, конечно, любые улучшения в библиотеке 5.2 больше не будут доступны).

РЕДАКТИРОВАТЬ: Майкл Прескотт указал, что это решение не будет работать надежно из-за несоответствия между версией конвертера Swiffy и временем выполнения. Альтернативное решение, которое не зависит от присутствия экспортера 5.1, - это использовать другие решения, предложенные здесь. Попробуйте добавить следующую функцию в скрипт. Он опрашивает, чтобы увидеть, когда объект Swiffy установил свой предпочитаемый цвет фона, а затем он его заменяет.

(function() {
    var firstNode=document.getElementById('swiffycontainer').childNodes[1];
    //firstNode.style.visibility = "hidden";
    if (firstNode.style.background=="") {
        setTimeout(arguments.callee, 10);
    } else {
        firstNode.style.background = "none";
        //firstNode.style.visibility = "visible";
    }
})();

Это, кажется, не показывает сбой, когда Swiffy сначала устанавливает сплошной фон, а затем его заменяют. Однако для большей уверенности вы можете разрешить закомментированным строкам скрывать первый узел, пока не будет установлена ​​правильная прозрачность.

с уважением

Answer 5

Согласно http://css-tricks.com/override-inline-styles-with-css/, вы можете использовать этот CSS-хак

div[id=swiffycontainer] > div{
    background-color: transparent!important;
}

Answer 6

Ничто из этого не сработало для меня (используя версию 5.2), решено установкой нового стиля:

<script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);      
    stage.start();
</script>
<style> 
    div {background: url("../bgimg.jpg") repeat scroll 0 0 transparent !important;} 
</style>