H5微信端无法识别二维码

发表于   |   分类于 ，   |  

微信端二维码无法识别

0_1479827054977_upload-03dd9aff-b07e-466f-896c-b03e30eba9a7

今天下午遇到的一个问题。在IOS下面长按图片无法识别二维码。
开始以为是用的background-image后面确认为img问题任然存在。

解决办法：

使用background-image和img结合起来。
例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html:

<div class="demo">
    <img src="xxxxx.png" alt="简单测试下啦"/>
<div>

css:
.demo{
  position:relative;
  width:250px;
  height:250px;
  overflow:hidden;
  background:url("xxxx.png") no-repeat;
}
img{
  width:250px;
  height:250px;
  position:absolute;
  top:0;
  left:0;
  transform:translate(-50%,-50%);
  opacity:0;
}

这样就完成了。

0_1479827906551_upload-1db3f13b-0cdf-4567-977f-d3c221d6a9f0

这样在IOS中也能长按识别二维码了。