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

Question

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

1 2 3 4 5 6 7 8 9 10 11

<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>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

.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; }

图一（开发工具上）：

图二（手机上）：

Answer 1

7七月 2016-12-18 14:16:55

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

• 提问者 佐佑时代 #1

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

Answer 2

7七月 2016-12-18 14:01:58

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

• 提问者 佐佑时代 #1

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

Answer 3

7七月 2016-12-18 14:01:39

1 2 3 4 5

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

• 提问者 佐佑时代 #1

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

Answer 4

7七月 2016-12-18 14:00:16

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

Answer 5

提问者 佐佑时代 2016-12-19 11:40:32

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