微信小程序——引入背景图片【六】
前言
之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了!
框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出。
在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢?
内联式
<view class="img" style="background-image: url(/static/images/draw.png)"></view>
外部引入
如果css是内嵌的或者外部引入的,那么背景图片就不能直接写本地地址,我这里是转存到七牛云后然后将外链写入,还有一种方式是将图片转为base64写入url()中
.img {
position: relative;
width: 340px;
height: 170px;
background-image: url("http://cache.wangyangyang.vip/draw.png");
background-size: 100%;
background-repeat: no-repeat;
// left: 18px;
top: -14px;
}
imgae标签
<image src="/static/images/game_count@3x.png" alt="参与场次"></image>
微信小程序——引入背景图片【六】的更多相关文章
- 微信小程序添加背景图片的坑
给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客 https://blog.csdn.net/y ...
- 微信小程序 - 动态背景图片实现
很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序,前端大梦想(六)
微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序引入md5.js
今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...
- 微信小程序把玩(十六)form组件
原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
随机推荐
- Fiddler抓包和修改WebSocket数据,支持wss
记录一下用Fiddler对WebSocket收发的数据进行抓包分析和篡改数据,只找到这么一个方法,能用就行吧. 时间:2019-3-29 环境: win7 + Fiddler 5.0 Fiddler抓 ...
- [UWP]为附加属性和依赖属性自定义代码段(兼容UWP和WPF)
1. 前言 之前介绍过依赖属性和附加属性的代码段,这两个代码段我用了很多年,一直都帮了我很多.不过这两个代码段我也多年没修改过,Resharper老是提示我生成的代码可以修改,它这么有诚意,这次就只好 ...
- codeforces#1097 D. Makoto and a Blackboard(dp+期望)
题意:现在有一个数写在黑板上,它以等概率转化为它的一个约数,可以是1,问经过k次转化后这个数的期望值 题解:如果这个数是一个素数的n次方,那么显然可以用动态规划来求这个数的答案,否则的话,就对每个素因 ...
- 简单QR分解之Gram-Schmit正交化&&Householder变换&&Givens Rotation变换&&计算步骤
- Survey项目总结
1.Ioc深入理解 Inverse of control org.springframework.scheduling.quartz.SchedulerFactoryBean org.mybatis. ...
- [2017BUAA软工助教]个人项目小结
2017BUAA个人项目小结 一.作业链接 http://www.cnblogs.com/jiel/p/7545780.html 二.评分细则 0.注意事项 按时间完成并提交--正常评分 晚交一周以内 ...
- apply和call方法
真伪数组转换 /* apply和call方法的作用: 专门用于修改方法内部的this 格式: call(对象, 参数1, 参数2, ...); apply(对象, [数组]); */ function ...
- JMeter学习FTP测试计划(转)
FTP服务主要提供上传和下载功能.有时间需要我们测试服务器上传和下载的性能.在这里我通过JMeter做一个FTP测试计划的例子. 1.创建一个线程组 2.线程组--->添加--->配置元件 ...
- [编程笔记]第一章 C语言概述
//C语言学习笔记 第一讲 C语言概述 第二讲 基本编程知识 第三讲 运算符和表达式 第四讲 流程控制 第五讲 函数 第六讲 数组 第七讲 指针 第八讲 变量的作用域和存储方式 第九讲 拓展类型 第十 ...
- C#设计模式之8:外观模式
外观模式 外观模式和适配器模式一样,都实现了接口改变,适配器模式是让一个接口转化成另外一个接口,而外观模式是让接口变得更简单. 先来看一下需求: 外观模式没有封装子系统的类,外观只是提供一个统一的接口 ...