在封裝日期選擇器時，需要選中時字體顏色加深，先看一下實現(xiàn)后的效果
可以看到加深的不是整個文字，而是中間那片區(qū)域今天聊的重點不在選擇器的封裝，主要看這個樣式效果，想了解此組件的實現(xiàn)思路可以看之前的文章日期選擇器實現(xiàn)思路：
1.首先它是進入所在區(qū)域顏色就會加深，不是整個字體，所以我們就不能從選中是改變文字樣式著手了，看到是區(qū)域首先想到的就是蒙層了
2. 可是蒙層實現(xiàn)中間顏色變淺容易，就加蒙層+透明+定位就好，那如何加蒙層中間顏色反而變深呢，如果糾結(jié)從選中部分解決顏色加深的效果將會陷入深思。。。
3. 我們知道顏色變淺色容易那就讓除了中間選中部分之外的都加蒙層使顏色變淺，到選中部分的自然都是深色了
4. 確定了要給上下加蒙層之后，又有問題需要考慮，如果加了蒙層在上面，還可以觸發(fā)touchmove滾動嗎？這里就想到了sticky定位
首先sticky不會脫離流文檔，那么觸發(fā)touchmove依舊是觸發(fā)的此盒子內(nèi)
代碼實現(xiàn)：
//html結(jié)構(gòu)
<body>
<div class="box">
<p class="top"></p>
<p class="one">123123</p>
.....此處省略很多個
<p class="one">123123</p>
<p class="bottom"></p>
</div>
</body>
//樣式
<style>
.box{
margin-top: 100px;
height: 420px;
width: 300px;
position: relative;
background-color: fff;
overflow: auto;
border: indigo 1px solid;
}
p{
margin:0;
height: 20px;
text-align: center;
}
//上下和加一個蒙層 背景白色 加上透明度 使遮擋的文字顏色變淺
.top{
height: 200px;
background-color: #fff;
position: sticky; //*******關(guān)鍵代碼
top: 0; //*******關(guān)鍵代碼
opacity: .4; //*******關(guān)鍵代碼
}
.bottom{
height: 200px;
background-color: #fff;
position: sticky;
bottom: 0;
opacity: .4;
}
</style>
實現(xiàn)效果：
到此這篇關(guān)于css實現(xiàn)滾動時選中區(qū)域字體顏色加深的示例代碼的文章就介紹到這了,更多相關(guān)css選中區(qū)域字體顏色加深內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
