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