小程序开发记录贴(陕西挂测)六-全局背景css渐变色

在初步完成了整个项目之后，现在开始做初步美化界面，在这里我们首先给小程序添加全局背景，然后在做渐变色处理，实现代码如下：

/**app.wxss**/

page::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-image: url('https://697a-izmm-97e47d-1257967894.tcb.qcloud.la/login-1.jpg?sign=5ec535f6e502af2bee9d3d5169453c4b&t=1544419144');
  transform: scale(1.3);
  background-size: 100% 100%;
  background-repeat: repeat;
  filter: blur(20px);
  z-index: -1;
}

page {
  line-height: 1.6;
  font-family: -apple-system-font, Helvetica Neue, sans-serif;
}

.weui-cells {
  opacity: 0.7;
  position: relative;
  margin-top: 1.17647059em;
  background-color: #fff;
  line-height: 1.41176471;
  font-size: 14px;
}

.weui-cells:before {
  top: 0;
}

.weui-cells:after, .weui-cells:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  color: #d9d9d9;
}

.weui-cells:after {
  bottom: 0;
  border-bottom: 1rpx solid #d9d9d9;
}

.weui-cells__title {
  margin-top: 0.77em;
  margin-bottom: 0.3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999;
  font-size: 14px;
}

.weui-cells_after-title {
  margin-top: 0;
}

.weui-cells__tips {
  margin-top: 0.3em;
  color: #999;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}

.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.weui-cell:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #d9d9d9;
  color: #d9d9d9;
  left: 15px;
}

.weui-cell:first-child:before {
  display: none;
}

.weui-cell_active {
  background-color: #ececec;
}

.weui-cell_primary {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.weui-cell__bd {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.weui-cell__ft {
  text-align: right;
  color: #999;
}

.weui-cell_access {
  color: inherit;
}

.weui-cell__ft_in-access {
  padding-right: 13px;
  position: relative;
}

weui-cell__ft weui-cell__ft_in-access
.weui-cell__ft_in-access {
  padding-right: 13px;
  position: relative;
}

.weui-cell__ft_in-access:after {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
}

image {
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

.flex-wrp-row {
  opacity: 0.7;
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}

.flex-wrp-list {
  position: fixed;
  height: 100%;
  width: 100%;
}

button {
  opacity: 0.7;
}

给出的代码实现所有功能的代码，这里说明下，其中page:before中为重点代码，css其他属性中的opacity：0.7为后期实现所有地方透明我们定义了一个半透明。