Удаление CSS-эффекта «фильтр: размытие» - не работает - PullRequest
Новая
       80

Удаление CSS-эффекта «фильтр: размытие» - не работает

0 голосов
/ 11 октября 2019

Кто-нибудь имеет представление о том, как применить фильтр : размытие к «Тексту A, B, C и т. Д.»строк, но сохраняйте номера списков (1, 2, 3 - в кругах) без разрыва ?

Сначала я попытался сделать следующее (см. пример кода ниже):

Я добавил фильтр: размытие (9px); в .meaning класс (который отвечает за ОБА - текст и цифры), и у меня все было размыто ( см. скриншот ). Затем я попытался нейтрализовать размытие в списке номеров, добавив filter: blur (0) к .ol.circle> li: before class (который, будучиПсевдокласс ": before" отвечает за номера списков, которые стоят ДО текста). Нет результата - числа остались размытыми.

Затем я удалил размытие из классов и решил попытаться решить проблему с помощью HTML части. Поэтому я подключил размытие непосредственно к строкам с текстом: 

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

Это снова размыло и - текст и его номер списка. Я в недоумении, что делать ...: - (

Код в JSFiddle: чистый - без размытия 

.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. Это именно то, что я хотел. Спасибо!

Ответы [ 2 ]

1 голос
/ 12 октября 2019

Фильтр размытия размывает весь элемент, к которому вы применяете его. Это не унаследованное свойство, поэтому вы не можете переопределить его для определенных дочерних элементов;вам нужно применять его только для правильных вещей.

Структура ваших 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);
}
1 голос
/ 11 октября 2019

Попробуйте добавить это 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>
...