如何修复 Safari mix-blend-mode: color-dodge bug? [英] How to fix Safari mix-blend-mode: color-dodge bug?

问题描述

我想实现一些位于图像顶部的文本，并使用 mix-blend-mode: color-dodge 使文本看起来更好.

示例如下:

它在 Chrome 和 Firefox 中完美运行，但在 Safari 中，不在图像顶部的文本会变成白色......对此有什么解决方案吗?

解决方案

将您的项目包裹在容器中，隔离容器，不要绝对定位您的 h1.

div {隔离:隔离；}h1{字体大小:10rem；颜色:#fb4b6b；混合模式:颜色减淡；}图像{位置:绝对；顶部:200px；z-索引:-1；}

<h1>你好混合混合模式</h1><img src="https://source.unsplash.com/random"/>

I want to achieve some text that sits on top of an image and using mix-blend-mode: color-dodge to make the text looks better.

Here is the example: https://codepen.io/pizza0502/pen/KepWGM

It works perfectly in Chrome and Firefox, but in Safari, the text that is not on top of the image will become white...any solution on this?

解决方案

Wrap your items in a container, isolate the container, and don't absolutely position your 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>

这篇关于如何修复 Safari mix-blend-mode: color-dodge bug?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！