使用渐变色gradient完成颜色

前一段时间，使用渐变色，现在刚好有一个需求，是一个页面两种背景色区分，刚好可以使用渐变色

<div class="zhezhao_half" style="background: linear-gradient(rgba(0, 0, 0, 0) 9.74513%, rgba(0, 0, 0, 0.5) 9.74513%, rgba(0, 0, 0, 0.5) 100%);">

</div>

.zhezhao_half{    width: 100%;    height: 100%;    background: linear-gradient(to bottom, rgba(0,0,0,0) 10%,rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 100%);    position: relative;    position: fixed;    z-index: 10;    overflow: hidden;}

但是在后期的适配测试中，发现linear-gradient 还是有适配问题，应为手机机型种类太多，这种不能实现完美适配。后期就将这种方式摒弃了，换了另外一种。

第二种解决方式：

<div class="zhezhao_half hide" style="display: block;">
    <div class="zhezhao_halfBgTitle"></div>
    <div class="zhezhao_halfBgDiv" style="height: 1214px;"></div>
    <div class="zhezhao_halfDiv">
        <i class="zhezhao_halfArrow"></i>
        <span>点击此栏可以为自己办理自动代交业务，防止因欠费而停机。</span>
    </div>
    <div class="zhezhao_halfIknow">我知道了</div>
</div>

.zhezhao_half {

1. width: 100%;
2. height: 100%;
3. /* background: linear-gradient(to bottom, rgba(0,0,0,0) 10%,rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 100%); */
4. position: relative;
5. position: fixed;
6. z-index: 10;
7. overflow: hidden;

}

.zhezhao_halfBgTitle {

1. height: 1.6rem;

}

.zhezhao_halfBgDiv {

1. background-color: rgba(0,0,0,0.3);

}

用了拼接的方式进行修改。其中一个拼接的高度是动态获取的。