前一段时间,使用渐变色,现在刚好有一个需求,是一个页面两种背景色区分,刚好可以使用渐变色
<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);
}
用了拼接的方式进行修改。其中一个拼接的高度是动态获取的。