下面我们将通过各种方法向大家介绍如何将微信小程序的样式设置为图片。具体内容如下：

方法一：重叠

将其设置为 :0 并将其放置在该图像的顶部。

方法二：-

-。背景图片不支持css中引用的资源，但是可以使用网络资源。

wxss

.goBack .share{ width: 38rpx; height: 36rpx; padding:0 20rpx; position: absolute; right: 32rpx; top: 0; bottom: 0; margin: auto; background-size: 38rpx 36rpx; background-repeat:no-repeat; border:none; }

-size 和 - 和 :none; 是必须的

方法三：

什么时候使用格式？条件：如果图片足够小，由于使用的特殊性不能做成精灵图，那么整个网站的复用性很高微信小程序开发之图片等比例缩放，基本不会更新。

方法四：嵌套

例子：

PS：我们看看微信小程序把客服按钮换成你想要的图片

文本：

今天开发了微信客服的功能，发现微信默认提供的图片样式实在是太难看了，所以想换成自己想要的图片样式，点击图片也一样的效果。让我们看看下面的比较。微信小程序开发与交流QQ群正在招人。欢迎加入群号()

做完这些，你觉得舒服吗？废话不多说，直接上代码：

实现原理：将原生-组件设置为透明并以绝对定位放置在左侧，保证不占空间，然后在-位置显示理想图像

//.wxml

客服

//.wxss

.pos{ position: absolute; top: 10px; left: 23px; opacity: 0; } .icon_kf{ width: 20px; height: 20px; display: inline-block; margin-top: 5px; } .dbtext{ line-height: 15px; color: #666; font-size: 12px; } //下面是最外层的view的样式，可以要也可以不要 .df_1{ -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-tap-highlight-color: transparent; } .l_h15{ line-height: 15px; text-align: center; }

总结

至此，这篇关于设置微信小程序样式为图片的文章就介绍到这里了。更多图片内容相关小程序样式设置，请搜索云海天教程之前的文章或继续浏览下方相关文章。我希望你以后会享受更多。支持云海天教程！

原文链接：