多背景混合 | 开创者教程

实例代码

<!DOCTYPE html>
<html>

<head>
    <title>
        background-blend-mode 属性演示
    </title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }

#myDIV {
            width: 500px;
            height: 400px;
            background-repeat: no-repeat;
            background-image: url("/uploads/20250507/deer.png"), url("/uploads/20250507/forest.jpg");
            background-position: center, center;
            background-size: contain, cover;
            background-blend-mode: screen, overlay;
        }

h1 {
            color: #333;
            text-align: center;
        }

p {
            color: #666;
            max-width: 500px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>background-blend-mode 属性演示</h1>
    <div id="myDIV"></div>
    <p><b>注意：</b>Internet Explorer 和 Edge 79 之前的版本不支持 background-blend-mode 属性。</p>
</body>

</html>