使用漸變色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 {
  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;
  index:10;
  overflow:hidden;
}

 

.zhezhao_halfBgTitle {
  height:1.6rem;
}

.zhezhao_halfBgDiv {
  backgound-color:rgba(0,0,0,0.3);
}

用了拼接的方式進行修改。其中一個拼接的高度是動態獲取的。