微信小程序——引入背景图片【六】
前言
之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了!
框架使用的是美团的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 组件不是太好用, ...
随机推荐
- .NET Core Community 第四个千星项目诞生:微服务框架 Surging
本文所有打赏将全数捐赠于 NCC(NCC 的资金目前由 倾竹大人 负责管理),请注明捐赠于 NCC.捐赠情况将由倾竹大人在此处公示. 提及 .NET 微服务,我们脑海中浮现的一系列印象中,总有 Sur ...
- item 24: 区分右值引用和universal引用
本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 古人曾说事情的真相会让你觉得很自在,但是在适当的情 ...
- mockjs使用
/** * 使用mockjs来mock数据, 提供mock数据API接口 */ import Mock from 'mockjs' import data from './data.json' //注 ...
- Codeforces Round #521 (Div. 3)
B 题过的有些牵强,浪费了很多时间,这种题一定想好思路和边界条件再打,争取一发过. D 题最开始读错题,后面最后发现可以重复感觉就没法做了,现在想来,数据量大,但是数据范围小枚举不行,二分还是可以的 ...
- Success Rate CodeForces - 807C (数学+二分)
You are an experienced Codeforces user. Today you found out that during your activity on Codeforces ...
- java线程池实现原理
(1):线程池存在哪些状态,这些状态之间是如何进行切换的呢? (2):线程池的种类有哪些? (3):创建线程池需要哪些参数,这些参数的具体含义是什么? (4):将任务添加到线程池之后运行流程? (5) ...
- innerText兼容问题处理
IE.Safari.Opera和Chrome支持innerText属性.低版本的火狐浏览器不支持,但支持作用类似的textContent属性.textContent是DOM3级规定的一个属性,而且也得 ...
- Web移动端---iPhone X适配(底部栏黑横线)
一.相信大家有被iPhone X底部黑色横线支配的恐惧 上面我们可以看到,底部的导航栏被一条黑色横线所盖住,那么就很烦.下面我们可以开始进行适配环节 1.首先我们可以用 JS 判断手机环境是不是 iP ...
- js中表达式 >>> 0 浅析
zepto源码的Array.prototype.reduce有一行 len = t.length >>> 0 当时就很疑惑,知道 >>是移位,那>>>又 ...
- Django模板渲染
一 . 语法 # 关于模板渲染只需要记住两种语法就可以: 1.{{ }} # 里面写变量 2.{% %} # 里面写与逻辑相关的,比如for循环 二 . 变量名 在django的模板语言中按照语法: ...