微信小程序——引入背景图片【六】
前言
之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了!
框架使用的是美团的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 组件不是太好用, ...
随机推荐
- 2018年计划小目标(9月)PMP
从6.23结束敏捷的系统贯穿学习考试,6.24开始做传统项目管理,系统学习计划,打包报考,(╥╯^╰╥):ACP+实战+PMP+软考,历时两个月 每天上下班路上3个小时,听录音,(报的远程班,倍速听了 ...
- rest-framework总结
1. CBV: pass 2 .APIView class BookView(APIView):pass url(r'^books/$', views.BookView.as_view(),name= ...
- Linux 安装软件之后设置PATH环境变量
每一个软件都有安装路径这一项,指定安装路径的目的,一方面是便于文件搜索与查找,另一方面更方便的使用软件. 比如,几乎大多数自己安装的软件,都会选择安装在/usr/local目录下,比如apache.m ...
- mybatis入门配置和调试
欢迎转载http://www.cnblogs.com/jianshuai520/p/8669177.html大家一起努力,如果看的时候有图片半边遮挡起来的话,右键查看图片,就可以观看完整的图片,具体怎 ...
- vue处理异步数据踩过的坑
在开发时,由于数据是异步的导致页面在render 时data是空值 出现报错和警告. 我是这么处理的 把data先写出一个空的完整结构.暂时是这么处理 或者用三元表达式进行赋值监听.data ?myd ...
- vue学习的笔记补充
// vue-router中可以使用 routes:[ { path:'/', name:'index', component:()=>import('./index') } ] // 这种写法 ...
- 【学亮IT手记】利用字节流复制文件
- C# Note33: 总结C# 6.0/7.0 新特性
先注明,本文主体参考自:C# 6.0新特性 目前代码中使用了很多C#6.0的新特性,下面以Point类来做相关叙述: public class Point { public int X { get; ...
- Java 多线程概述
几乎所有的操作系统都支持同时运行多个任务,一 个任务通常就是一个程序,每个运行中的程序就是一个进程.当一个程序运行时,内部可能包含了多个顺序执行流,每个顺序执行流就是一个线程. 线程和进程 几乎所有的 ...
- Ionic1.x项目中的Installing npm packages问题
与npm远程源有关,可以通过cnpm来解决: 一.ionic start myApp blank --skip-npm(跳过Installing npm packages会产生的问题): 二.然后进入 ...