我想实现一些位于图像顶部的文本并mix-blend-mode: color-dodge
用于使文本看起来更好。
这是示例: https ://codepen.io/pizza0502/pen/KepWGM
它在 Chrome 和 Firefox 中完美运行,但在 Safari 中,不在图像顶部的文本会变成白色......对此有什么解决方案吗?
我想实现一些位于图像顶部的文本并mix-blend-mode: color-dodge
用于使文本看起来更好。
这是示例: https ://codepen.io/pizza0502/pen/KepWGM
它在 Chrome 和 Firefox 中完美运行,但在 Safari 中,不在图像顶部的文本会变成白色......对此有什么解决方案吗?
将您的物品包装在容器中,隔离容器,并且不要绝对定位您的h1
.
div {
isolation: isolate;
}
h1 {
font-size: 10rem;
color: #fb4b6b;
mix-blend-mode: color-dodge;
}
img {
position: absolute;
top: 200px;
z-index: -1;
}
<div>
<h1>Hello Mix Blend Mode</h1>
<img src="https://source.unsplash.com/random"/>
</div>