删除 CSS "filter: blur" 效果 - 不起作用

Question

有没有人知道如何将 filter:blur 应用到 "Text A, B, C, etc." 行，但保留 list numbers ( 1、2、3 - 在圆圈中）不模糊?

首先我尝试执行以下操作（参见下面的示例代码）：

我添加了 filter: blur(9px); 到 .meaning class （它负责两个 - 文本和数字），我把一切都弄糊涂了（see the screenshot）。然后我尝试通过添加 filter: blur(0) 到 .ol.circle 来 neutralize blur in list numbers > li:before class（作为“:before”伪 class 负责列表编号位于文本之前）。没有结果 - 数字仍然模糊不清。

然后我从 classes 中删除了模糊，并决定尝试通过 HTML 部分解决问题。所以我将模糊直接插入到带有文本的行中：

<li style="padding-left:1em;filter: blur(9px)">Text A</li>

这再次模糊了两者 - 文本及其列表编号。我不知所措...:-(

Code at JSFiddle: clean - no blur

.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);
}

已解决！ 请参阅 Brilliand 的评论。 This 正是我想要的。谢谢！

Answer 1

尝试添加这个 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>

Answer 2

模糊滤镜会模糊您应用它的整个元素。它不是继承的属性，因此您不能为特定的子元素覆盖它；您只需要将其应用于正确的事情即可开始。

您的 li 元素的结构如下所示：

<li style="padding-left:1em">
    ::before
    "Text A"
</li>

（从Chrome的开发工具中复制）

如何只对结构的文本部分应用样式，而不包括 ::before？你……不能。不是那种结构。但是如果你把结构改成这样：

<li style="padding-left:1em">
    ::before
    <span class="blur-this">Text A</span>
</li>

现在您可以只针对范围进行模糊处理：

.blur-this {
    filter: blur(9px);
}

删除 CSS "filter: blur" 效果 - 不起作用

Removing CSS "filter: blur" effect - doesn't work

html

css

blur

css-filters