小程序头部导航栏添加图片背景

原理: 通过将原来的头禁用，页面自然而然的就会顶上去，然后封装一个导航栏的组件

这里是用uniapp开发的

下面是效果图:

首先禁用所有头导航，在pages.json的window里加一行这个，你会发现所有头都消失了。

也可以只改某个页面的头部

wxml文件

scss文件

3.具体页面

4.小程序胶囊颜色修改

pages.json

"navigationBarTextStyle":"white"

"navigationBarTextStyle":"black"

参考下面方法：

1先实现一个小雨滴

首先雨滴是一个个小的椭圆形元素：

.raindrop {

width: 8px

height: 7px

border-radius: 100%

}

2其次雨滴是一个个凸透镜，能折射出远处的景色，远景所处位置远大于2倍焦距，成倒立、缩小的实像。

“倒立”的效果可以通过旋转180°来实现，“缩小”的效果通过设置背景图片的尺寸来达到（下面把背景图缩小到全屏的5%并居中）。

.raindrop {

position: absolute

background-image: url("背景图地址")比如：i.imgur.com/xQdYC7x.jpg 前面加上http://。

background-size: 5vw 5vh

background-position: 50%

transform: rotate(180deg) rotateY(0)

}

这样就得到了一个小雨点。

3随机雨滴

接着要创建一些随机分布的雨点对象，假如只有几个，可以手动编写CSS代码，但如果有几十个，直接写CSS代码的效率和可维护性就很差了。

使用SCSS的random方法，来随机微调雨点对象的尺寸和绝对位置。

// 生成0到1之间的随机数

$x:random()

$y:random()

// 随机尺寸和位置

$drop-width:5px+random(11)

$drop-stretch:0.7+(random()*0.5)

$drop-height:$drop-width*$drop-stretch

.raindrop:nth-child(#{$i}){

left:$x * $width

top:$y * $height

width:$drop-width

height:$drop-height

background-position:percentage($x) percentage($y)

}

}

4效果增强

还可以给雨滴添加一点闪光的视觉效果，通过CSS3滤镜来实现：

[css] view plain copy

.raindrop {

filter: brightness(1.2)

-webkit-filter: brightness(1.2)

}

1、首先新建一个uni-app的默认模板。

2、其次构建项目目录结构，uni.scss是默认模板中自带的。

3、然后写style.scss文件，在uni.scss文件中定义样式的具体值。

4、最后在App.vue中引入全局背景图片，设置theme1中的背景图片为默认背景。

---