微信小程序：背景图片透明处理（采用CSSwxss）

例如：

其中05是透明度

例如：

其中095是背景图透明度，使用效果如下图：

>

直接使用阿里巴巴的网络路径

选择iconfont图标

官网：阿里巴巴矢量字体库

步骤：阿里巴巴字体库使用方法

全局引入appwxss

12345678910111213141516171819202122232425262728293031323334@font-face { font-family: 'iconfont'; / project id 518032 / src: url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmieot'); src: url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmieot#iefix') format('embedded-opentype'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmiwoff') format('woff'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmittf') format('truetype'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmisvg#iconfont') format('svg');}iconfont { font-family:"iconfont" !important; font-size:60rpx; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/本项目使用的18个图标 /icon-zhiding:before{content: '\e739';}icon-zuojiantou:before{content: '\e736';}icon-youjiantou:before{content: '\e735';}icon-shangjiantou:before{content: '\e734';}icon-xiajiantou1:before{content: '\e733';}icon-xiajiantou:before{content: '\e6cc';}icon-gengduotianchong:before{content: '\e67f';}icon-erweima:before{content: '\e65f';}icon-fenleiorguangchangorqita:before{content: '\e64f';}icon-dibiao:before{content: '\e64d';}icon-bangzhu:before{content: '\e64a';}icon-xinfeng:before{content: '\e640';}icon-duihuaxinxi:before{content: '\e639';}icon-sousuo:before{content: '\e62f';}icon-shouye:before{content: '\e62d';}icon-shezhi:before{content: '\e62a';}icon-shanchu:before{content: '\e629';}icon-dianhua:before{content: '\e61b';}

使用图标

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

注意：此处实现采用的是无APPID的开发模式，实际应用应该在微信小程序管理平台的开发设置中配置合法域名。

下载到本地

步骤

字体文件转化成base64格式

解压压缩包 —- 找到ttf格式文件 —- 上传到平台转化为base64格式 —- 下载压缩包 —- 将css文件名改为wxss —- 放入项目文件夹 —- 用@import全局引入 —- 使用

使用—-引入及全局定义

123456789101112131415161718192021222324@import "src/css/iconwxss";iconfont { font-family: "iconfont"; font-size:60rpx;}/本项目使用的18个图标 /icon-zhiding:before{content: '\e739';}icon-zuojiantou:before{content: '\e736';}icon-youjiantou:before{content: '\e735';}icon-shangjiantou:before{content: '\e734';}icon-xiajiantou1:before{content: '\e733';}icon-xiajiantou:before{content: '\e6cc';}icon-gengduotianchong:before{content: '\e67f';}icon-erweima:before{content: '\e65f';}icon-fenleiorguangchangorqita:before{content: '\e64f';}icon-dibiao:before{content: '\e64d';}icon-bangzhu:before{content: '\e64a';}icon-xinfeng:before{content: '\e640';}icon-duihuaxinxi:before{content: '\e639';}icon-sousuo:before{content: '\e62f';}icon-shouye:before{content: '\e62d';}icon-shezhi:before{content: '\e62a';}icon-shanchu:before{content: '\e629';}icon-dianhua:before{content: '\e61b';}

开发使用

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

小程序的动画不是有专门的api吗？详细请看小程序开发文档：>

我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。

所以我们可以使用变量来优化。

在html, css里面，它原始的定义方式及使用方法是这样的

其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。

使用的时候，用var()函数进行调用。

注意：约定变量名须以两个连字符'--'开头

在小程序中，用法基本也是一样的：

我们在wxss页面中进行定义

注意，page选择器是选中整个页面，前面是没有''号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。

你也可以在wxml里面直接使用！

这个wxss变量，既可以在每个页面mypagewxss里面的page里声明，

，就能在所有页面里使用。

1 可以通过修改CSS样式实现。

2 首先需要将容器元素设置为 display:flex; 然后设置元素的宽度为固定值或百分比，并设置 margin-right:20px; 使其与下一个之间留有一定的空隙。

3 可以根据具体需求修改容器元素和元素的CSS样式，以达到想要的效果。

以上就是关于微信小程序：背景图片透明处理（采用CSS/wxss）全部的内容，包括:微信小程序：背景图片透明处理（采用CSS/wxss）、微信小程序 如何引入外部字体库iconfont的、微信小程序怎么用animate.css等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！