html - 删除 CSS“过滤器:模糊”效果 - 不起作用
问题描述
有没有人知道如何将过滤器:模糊应用于“文本 A、B、C 等” ?行,但保持列表编号(1、2、3 - 圆圈)不模糊?
首先,我尝试执行以下操作(请参见下面的示例代码):
我添加了过滤器:模糊(9px);到.meaning类(负责两者 - 文本和数字),我把所有东西都弄模糊了(见截图)。然后我尝试通过添加filter: blur(0)到.ol.circle > li:before类来中和列表编号中的模糊(其中,作为 ":before" 伪类负责文本之前的列表编号) . 没有结果 - 数字保持模糊。
然后我从类中删除了模糊,并决定尝试通过HTML部分解决问题。所以我将模糊直接插入带有文本的行:
<li style="padding-left:1em;filter: blur(9px)">Text A</li>
这再次模糊了两者- 文本和列表编号。我不知道该怎么办...... :-(
.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
font-size: 20px;
font-weight: 600;
filter: blur(9px);
}
ol.circle > li:before {
margin-right: 1em;
margin-left: -2.77em;
content: counter(item);
background: #1f2c60;
border-radius: 100%;
color: white;
width: 1.7em;
text-align: center;
display: inline-block;
filter: blur(0);
}
解决了!请参阅 Billiand 的评论。这正是我想要的。谢谢!
解决方案
尝试添加这个 css:
text-shadow: none;
这里(最后一项)这样数字不会有文字阴影效果。并且文本 -> 文本 A... B... 将继续模糊
.meanings_and_examples {
display: flex;
flex-direction: column;
}
ol.circle {
list-style-type: none;
}
ol.circle > li {
counter-increment: item;
margin-bottom: 2px;
}
ol.circle > li:before {
margin-right: 1em;
margin-left: -2.77em;
content: counter(item);
background: #1f2c60;
border-radius: 100%;
color: white;
width: 1.7em;
text-align: center;
display: inline-block;
text-shadow: none;/*add this*/
}
ul {
list-style-type: none;
padding: 0;
padding-bottom: 10px;
padding-left: 1em;
}
li {
line-height: 1.6;
}
.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
font-size: 20px;
font-weight: 600;
}
.example {
width: auto;
text-align: left;
font-style: italic;
font-weight: 400;
}
<div class="meanings_and_examples">
<div class="meaning">
<ol class="circle">
<li style="padding-left:1em">Text A</li>
<div class="example">
<ul>
<li>Text B</li>
</ul>
</div>
<li style="padding-left:1em">Text C</li>
<div class="example">
<ul>
<li>Text D</li>
</ul>
</div>
<li style="padding-left:1em">Text E</li>
<div class="example">
<ul>
<li>Text F</li>
</ul>
</div>
</ol>
</div>
</div>
推荐阅读
- android - BLE:三星手机上的 onConnectionStateChange 状态 8
- javascript - 如何使用异步代码以正确的顺序记录响应
- angularjs - ng-model 的 angularjs 嵌套 Ng-Repeat 问题
- javascript - ImageMapster“突出显示”始终打开
- javascript - 在 Symfony 路径中使用 Javascript 变量(Ajax 请求)
- r - 在其他变量(ggplot2 和 plotly)上带有过滤器(按钮)的交互式直方图
- sql - 在 SQL 中合并数据和非数据行
- reactjs - 如何在 React 中创建一个突出的 AppBar?
- scala - 选项类型的“提升”例外
- reactjs - 反应动态呈现的组件不更新