请教老师关于filter: blur(20px)在手机上显示异常的问题

来源：

佐佑时代

2016-12-18

老师，你好，我在调试程序时，对于图片模糊效果，在电脑软件中显示是正常的（图一），但在手机上显示的时候（图二），图片下边没有明显的边界线，看起来效果不好，请问这个可能是什么原因造成的？谢谢！

<import src="/wxParse/wxParse.wxml" />
<view class="container">
  <image class="head-img" src="{{appServer}}{{channel.thumbnail}}" mode="aspectFill"></image>
  <view class="head-img-hover">
    <text class="main-title">{{channel.text}}</text>
    <text class="sub-title">{{channel.description}}</text>
  </view>
  <view class="detail">
    <template is="wxParse" data="{{wxParseData:content.nodes}}" />
  </view>
</view>

.container {
  display: flex;
  flex-direction: column;
}

.head-img {
  width: 100%;
  height: 320rpx;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

.head-img-hover {
  width: 100%;
  height: 320rpx;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 19px;
  color: #fff;
  font-weight: bold;
  margin-top: 50rpx;
  margin-left: 40rpx;
  letter-spacing: 2px;
}

.sub-title {
  font-size: 28rpx;
  color: #fff;
  margin-left: 40rpx;
  margin-top: 30rpx;
}

.detail {
  color: #666;
  margin-left: 10rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  margin-right: 10rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
}

图一（开发工具上）：

图二（手机上）：

写回答

5回答

7七月

2016-12-18

iphone上没有这个问题，可能是Android兼容性的问题。

佐佑时代

好像就微信浏览器不兼容这个属性：https://segmentfault.com/q/1010000003024380

2016-12-19

共1条回复

7七月

2016-12-18

当然，是在iphone上，android上没有试过

佐佑时代

我现在是在android上出现的这个问题！不知道是不是兼容性问题了

2016-12-18

共1条回复

7七月

2016-12-18

.head-img{
    width:100%;
    height: 320rpx;
    -webkit-filter:blur(20px);
}

佐佑时代

与多写一行filter: blur(20px);没有关系，我也试过。

2016-12-18

共1条回复

7七月

2016-12-18

我这这边pc和手机上的效果都有边线都有

佐佑时代

提问者

2016-12-19

老师，有没有别的办法来实现滤镜效果，比如说通过JS来实现呢？

微信小程序入门与实战

历时4年，学员20000+，缔造高口碑的精品课程

24016 学习 · 6935 问题

查看课程

相似问题

显示本地图片，真机不能显示

回答 2

老师，我自己项目的图片在部分安卓手机上显示不出来。图片是https的，证书的TLS是1.0,小于1.2。这个影响图片的显示吗?

回答 2

老师，模拟器上可以获取豆瓣数据，真机上面为什么不能获取导数据？

回答 6

background : url(/images/xxx.jpg) 手机端无法显示

回答 2

获取的豆瓣电影列表在真机上无法显示

回答 2

打开慕课网App查看更多内容