CSS3模糊滤镜如何应用在背景上而不影响其中内容的显示？
<divclass="horizontal-scroll-wrapper"id="scroller"style="background-image:url(../main...
<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 都模糊了。
请问如何使得这个滤镜只作用于 scroll-wrapper 背景上？ 展开
<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 都模糊了。
请问如何使得这个滤镜只作用于 scroll-wrapper 背景上？ 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏30（财富值+成长值）
1个回答
展开全部
滤镜属性被子元素继承了，这个纯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 两个区域的高度，让矮的那个始终高度等于高的那个
(现成的js网上到处都是，自己百度)
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
