<div class="horizontal-scroll-wrapper" id="scroller" style="background-image: url(../main.png); background-size:150%; background-position: center right; background-color: black; -webkit-filter: blur(3px);"><div class="horizontal-scroll-area" style="width:3000px;"></div><div class="horizontal-scroll-pips"></div></div>現在我想讓 scroll-wrapper 這個 div 使用 -webkit-filter: blur(3px); 添加模糊濾鏡，但是上面的代碼會讓其中包含的 scroll-area 和 scroll-pips 都模糊了。
1 回答
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
濾鏡屬性被子元素繼承了，這個純css不能解決，這玩意子繼承了父的模糊根本覆蓋不了：
<body>
<div id="a">id=a這層單獨放：圖片背景+模糊濾鏡</div>
<!-- 下面id=b這個div里面才放你網頁主要結構 -->
<div id="b">
<div class="horizontal-scroll-area" style="width:3000px;"></div>
<div class="horizontal-scroll-pips"></div>
</div>
</body>
然后：
----------------------------------------------------------------------
css 定位屬性讓 b 重疊在 a 上面合適位置
(給a、b外面再加個父級并相對定位，a、b分別絕對定位)
弄個js，判斷 a、b 兩個區域的高度，讓矮的那個始終高度等于高的那個
添加回答
舉報
0/150
提交
取消