Question

我在使用＆＃34; overlay＆＃34;的图层的网站上工作混合模式。这些图层正在移动以在背景上创建渐变效果。我使用CSS动画来为这些动画获取GPU渲染，但它非常沉重，每当网站打开并渲染时，我都能从计算机中听到风扇。

我不知道如何提高性能以减少这种过热问题。你能帮助我吗？

以下是该网站的相关部分：

HTML

<div class="backgroundTransparent">
    <img id="img1" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_1.png') }}">
    <img id="img2" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_2.png') }}">
    <img id="img3" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_3.png') }}">
    <img id="img4" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_4.png') }}">
    <img id="img5" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_5.png') }}">
    <img id="img6" class="transparent_background" src="{{ url_for('static', filename='calques_de_fond_6.png') }}">
</div>

CSS

@keyframes move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(20%);
    }
}
.transparent_background {
    height:100%;
    width: 100%;
    position: absolute;
    transform: translateZ(0);
    mix-blend-mode: overlay;

    animation-duration: 3s;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

以下是该网站目前的链接，如果可以提供帮助：http://brunobosse.wiboyd.fr:8080

值得注意的是，如果没有叠加混合模式，性能会更好。是否可以改善叠加混合模式？

Answer 1

所以我最终没有将叠加应用于背景，因为它太强烈了GPU，只有DOM中的较小元素。

CSS混合模式真正消耗GPU

1 个答案: