小程序设置背景图片的两种方法总结 |
您所在的位置：网站首页 › 最新微信背景图怎么设置 › 小程序设置背景图片的两种方法总结 |
小程序设置背景图片的两种方法总结
|
背景图片
我们会时常遇到设置背景图片，这里简单地总结下两种方法: 1.background-imagebackground-image，顾名思义是背景图片的意思，设置父亲元素，然后通过background-image:url(‘图片的相对路径’);的办法来设置背景图片，可以将本地图片上传到github,qq 空间或者base64图片 来获取相对路径. 下面有一段简单的代码实例: /*WXML代码*/ 12° 晴天 /*CSS代码*/ page{ width:100%; height:100%; } .temp{ text-align: center; font-size: 200rpx; line-height:1.4; opacity: 0.8; } .weather{ text-align: center; font-size:40rpx; line-height:1.4; opacity:0.65; } .weather-wrapper{ background-image: url(https://raw.githubusercontent.com/udacity/cn-wechat-weather/2-4/images/sunny-bg.png); padding-top: 174rpx; padding-bottom: 250rpx; background-repeat: no-repeat; background-size: 100% 100%; }效果图如下: 设置父亲元素为relative，然后让想设置的图片首先为子元素，然后设置为absolute,然后通过top,left定位的方式来定位，然后设置这个图片的宽度和高度为100%. 12° 晴天 page{ width:100%; height:100%; } .temp{ text-align: center; font-size: 200rpx; line-height:1.4; opacity: 0.8; } .weather{ text-align: center; font-size:40rpx; line-height:1.4; opacity:0.65; } .weather-wrapper{ position:relative; padding-top: 174rpx; padding-bottom: 250rpx; } .weather-bg{ position: absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }效果图： |
以上首先设置了父亲元素，然后再通过background-image的方式来设置背景图片.
以上是两种方法，没有好坏之分，但图片建议使用相对路径而不是本地图片.【本文地址】
今日新闻 |
推荐新闻 |