【发布时间】：2022-01-17 18:29:02
【问题描述】：
我想这个问题没有解决方案，但我想问你。 我正在使用 Tailwind 和混合模式，但我只在 Safari 浏览器中得到不同的结果。看起来 Safari 可以与底层元素混合，但不能与主容器背景混合。
我在下面附上代码和图片以便更好地理解。
我的 HTML 代码与顺风混合
<!-- main element has radial gradient, I thought it is issue, but it behave same with plain color
.ravn_main_gradient{
background: radial-gradient(62.14% 122.16% at 49.03% 44.32%, rgba(33, 56, 63, 0.95) 0%, #1B2325 100%);
} -->
<main class="block w-full h-full bg-no-repeat bg-center bg-cover overflow-hidden relative mt-0 ravn_main_gradient">
<div class="card flex flex-col min-w-[365px]">
<div class="_first max-w-[200px] max-h-[180px] bg-[#1F4952] overflow-hidden">
<img class="w-full opacity-50 mix-blend-hard-light" src="{% static 'img/dc_shoe.png' %}">
</div>
<div class="_middle half_bg h-[calc(180px+5rem)] relative">
<!-- number use mix blend overlay -->
<p class="_number absolute -bottom-7 left-[calc(200px-1.8rem)] text-white text-6xl font-secondary font-bold tracking-negative mix-blend-overlay">02</p>
<div class="font-secondary text-white pl-7 pt-7 pr-8">
<!-- main title use blend exclusion -->
<h3 class="text-2xl font-bold mb-5 mix-blend-exclusion">3D/AR Viewer of sneakers</h3>
<p class="opacity-80 mb-1 font-light">Lorem ipsum dolor sit amet.</p>
<p class="opacity-80 mb-1 font-light">Fusce dui leo, imperdiet in, aliquam sit amet.</p>
<p class="opacity-80 mb-1 font-light">Aliquam in lorem sit amet leo accumsan lacinia.</p>
</div>
</div>
</div>
</main>
有什么办法可以解决这个问题吗？我找不到任何东西，我怀疑有任何东西。谢谢。
【问题讨论】：
-
这可能会对您有所帮助stackoverflow.com/questions/50628725/… 它不在 Tailwind 中，但似乎是一个类似的问题，Tailwind 只是 CSS 的核心。 Safari 对
mix-blend-mode和许多其他东西有奇怪的行为。 -
所以我不确定您的
half_bg类是什么，但我使用绝对定位元素作为扩展图像底部。呃......这在 Safari 和 Chrome play.tailwindcss.com/hGlYDaD2jT 上具有相同的行为，该数字与背景渐变很好地融合在一起。你的 Safari 是什么版本？ -
谢谢，我想通了。问题在于整个设计决策。我已经对此做出了自己的回答。我没想到滚动溢出是 Safari 的问题。真的很奇怪...谢谢你的努力！
-
很好地解决了您自己的问题！听起来像是一个 Safari 错误，我会说 report it，但我不觉得 Safari 像 chromium 团队那样尊重开发人员的反馈。
-
@JHeth...哈哈，是的，你是对的。我也对此表示怀疑。有时我在使用 Firefox 和 Internet Explorer 时遇到问题，现在通常只有 Safari。
标签： html safari tailwind-css blending