时间戳

首页 > 解决方案 > Svg 图像里面有颜色

: 如何将混合混合模式应用于 HTML 背景颜色？

html - Svg 图像里面有颜色
: 如何将混合混合模式应用于 HTML 背景颜色？

问题描述

我有一个 SVG 文件，其中mix-blend-mode定义了特定元素的样式。混合正确应用于 SVG 内的其他元素，但不适用于包含的 HTML<div>背景颜色。

例子：

<!doctype html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        main {
            height: 100px;
            background-color: darkred;
        }
    </style>
</head>
<body>
    <main>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewBox="0 0 450 450">
            <circle cx="174" cy="165" r="160" style="fill: yellow" />
            <circle  cx="245" cy="260" r="160" style="mix-blend-mode: multiply; fill: darkcyan" />
        </svg>
    </main>
</body>
</html>

我该如何改进它，以便深青色改变红色 HTML 背景？

截屏

想要的结果：

想要的结果

标签： htmlsvgmix-blend-mode

解决方案

将mix-blend-mode规则添加到<svg>? 这就是你所追求的吗？

body {
    margin: 0;
}
main {
   height: 100px;
   background-color: darkred;
}
svg {
   mix-blend-mode: multiply;
}
<main>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewBox="0 0 450 450">
        <circle cx="174" cy="165" r="160" style="fill: yellow" />
        <circle  cx="245" cy="260" r="160" style="mix-blend-mode: multiply; fill: darkcyan" />
    </svg>
</main>

推荐阅读