时间戳

首页 > 解决方案 > Safari：混合混合模式亮度无法正常工作

css - Safari：混合混合模式亮度无法正常工作

问题描述

我有一张mix-blend-mode在 Firefox 和 chrome 上完美运行的图像，但不适用于 safari。叠加层位于我拥有的 CSS 滑块上，但我发现它transform弄乱了mix-blend-mode属性。如何避免转换干扰 css 样式。

我正在使用Swiper Slider

下面我放置了我的代码以及它的外观。最终结果应如下所示：

在此处输入图像描述

section {
  position: relative;
  will-change: opacity;
}

section::after {
  background-color: #3b5873;
  border: 33.325px solid #c4ae7e;
  content: '';
  display: block;
  height: calc(100% - 66.65px);
  position: absolute;
  top: 0;
  width: calc(100% - 66.65px);
}

.container {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  mix-blend-mode: luminosity;
  z-index: 9;
}

.image-bg {
  background-size: cover;
  padding-top: 59.08%;
}
<section>
  <div class="container">
    <div class="image-bg" style="background-image:url('http://dev-thepaxton.pantheonsite.io/wp-content/themes/paxton-theme/dist/images/home/gallery_0.jpg')"></div>
   </div>
</section>

标签： csstransformmix-blend-mode

解决方案

不幸的是，mix-blend-modeSafari/WebKit SVG 元素不支持：

https://caniuse.com/#feat=mdn-css_properties_mix-blend-mode_svg

推荐阅读