Загрузка...

Can I fix this thing with blur?

Thread in Frontend created by 87696796 May 4, 2024. 194 views

  1. 87696796
    87696796 Topic starter May 4, 2024 Я люблю всех :З 117 Aug 29, 2019
    Короче хочу сверстать такую страничку https://band.link/23FEBRUARY
    Но при заблюривании заднего фона появляются белые рамки. Как это фиксится?
     
  2. shin7sp
    shin7sp May 4, 2024 статус на продаже, коренной житель офтопа 247 Feb 3, 2024
    Ты используешь стандартный блюр, он называется "Размытие по Гауссу". Фиксится самым простым спосгобом, слоями накинь ещё 1 слой и заблюрь его, либо через параметры блюра
     
    1. 87696796 Topic starter
      shin7sp, внутрь этого дива еще один и на него кинуть фильтр? Не получается так(
  3. azurescens
    azurescens May 4, 2024 5065 Dec 3, 2023
    HTML
    <div class="background">
    <img src="img.jpeg" class="cover">
    </div>
    CSS
    .background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    }

    .cover {
    position: relative;
    object-fit: cover;
    }

    .cover::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px);
    }
    Картинку вставь на страницу элементом, а не через background-image и поверх этого элемента накинь фильтр размытия
     
  4. UnSad
    UnSad May 4, 2024 21 Jun 1, 2019
     
    1. 87696796 Topic starter
      UnSad, Спасибо, твое решение заработало идеально :da:
Loading...
Top