контент не видно из-за blur

Question

не видно контент блока из-за backgrounda, помогите исправить пожалуйста

.about {
   background: url(../img/background.png);
   height: 800px;
   filter: blur(10px);
}

.wwc {
   display: flex;
   justify-content: center;
}

.wwcTable {
   border: 1px solid var(--light);
}

<main>
      <div class="about">
         <div class="wwc">
            <div class="wwcTable">
               <ul>
                  <li>Разработка веб-сайтов</li>
                  <li>Дизайн логотипов</li>
                  <li>Разработка продающих текстов</li>
                  <li>Дизайн полиграфии</li>
               </ul>
            </div>
         </div>
      </div>
   </main>

Answer 1

Если Вы хотите размыть только фон, то его надо задавать не родительскому блоку, а, например, псевдоэлементу с абсолютным позиционированием:

.about {
   height: 800px;
   position: relative;
}
.about:before {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(https://im0-tub-ru.yandex.net/i?id=e3b2b504468937b2532351cc93761734-l&n=13);
  z-index: -1;
  filter: blur(10px);
}
.wwc {
   display: flex;
   justify-content: center;
}
.wwcTable {
   border: 1px solid var(--light);
}

<main>
  <div class="about">
    <div class="wwc">
      <div class="wwcTable">
        <ul>
          <li>Разработка веб-сайтов</li>
          <li>Дизайн логотипов</li>
          <li>Разработка продающих текстов</li>
          <li>Дизайн полиграфии</li>
        </ul>
      </div>
    </div>
  </div>
</main>

БЛОГ НА HUSL

контент не видно из-за blur

Ответы (1 шт):