我如何制作'backdrop-filter：blur()'效果在iOS上是否有效？

r1wp621o 于 2023-03-05 发布在 iOS

关注(0)|答案(1)|浏览(897)

我模糊了我网站上一个容器的背景图像，它在所有浏览器上都有效，除了iOS设备上的浏览器。
CSS和HTML代码如下所示：

.backblurred {
  backdrop-filter: blur(20px);
  width: 100%;
}

<div class="jumbotron top-space">
  <div class="container backblurred">
    <h3 class="text-center thin">The Raw Facts:</h3>
    <div class="row">
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-tint fa-5"></i>Powered By Nature</h4>
        </div>
        <div class="h-body text-center">
          <p>High quality acrilic paints, made for art enthusiasts, hobbyists and whoever else feels like painting.</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-leaf fa-5"></i>Eco-Friendly</h4>
        </div>
        <div class="h-body text-center">
          <p>Our paints are made 100% form recycled materials, including: cigarette buts, wood, seaweed and coffee.</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-plus-square fa-5"></i>Safe To Use</h4>
        </div>
        <div class="h-body text-center">
          <p>Our paints are 100% non-toxic and safe to use in any capacity that other profesional paints are used.</p>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 highlight">
        <div class="h-caption">
          <h4><i class="fa fa-5a">A+</i>Premium Quality</h4>
        </div>
        <div class="h-body text-center">
          <p>Our acrylic paints provide the same quality you can expect out of any other acrylic paint, while still being safe for the environment and fun for the every-day user.</p>
        </div>
      </div>
    </div>
    <!-- /row  -->

  </div>
</div>

我在网上研究了这个问题，但不明白我做错了什么。有人能帮忙吗？

ios

来源：https://stackoverflow.com/questions/75606971/how-can-i-make-backdrop-filter-blur-effect-work-on-ios

1条答案

按热度按时间

deyfvvtc1#

并非所有iOS设备和版本都完全支持backdrop-filter CSS属性。
一种可能的解决方案是使用背景模糊的透明PNG图像作为容器的背景，而不是使用backdrop-filter。这种方法可以达到类似的效果，并且在设备和浏览器上得到更广泛的支持。
下面是一个例子：

.backblurred {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.backblurred::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* replace background-image url with your image */

  /* note that if you use a local file as the image you should replace the url like: '/path/to/image'  */

  background-image: url(https://i.natgeofe.com/n/548467d8-c5f1-4551-9f58-6817a8d2c45e/NationalGeographic_2572187.jpg?w=1272&h=848);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  opacity: 0.8;
  z-index: -1;
}

<div class="backblurred">
  <h1>Hello, world!</h1>
  <p>This is some content that will appear over the blurred background.</p>
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

我如何制作'backdrop-filter：blur()'效果在iOS上是否有效？

1条答案

相关问题

热门标签

最新问答