Как сделать, чтобы контейнер было видно только внутри карточек

Рейтинг: 0Ответов: 1Опубликовано: 24.05.2023

Есть контейнер, внутри (или поверх) которого располагаются карточки. Вопрос в том как сделать так, чтобы пространство между карточками было белым (или просто не отображался контейнер) а внутри самих карточек видно контейнер.

В целом первоначальная задача: сделать карточки у которых будет "общий градиент" и который будет отображаться только в них.

После изображений прикладываю код и что имею на данный момент. На 1 изображении - прозрачные карточки без наполнения поверх градиента (показать, что он как бы общий). На втором - то, к чему я стремлюсь.

Изображение-карточек-1

Изображение-карточек-2

Такой код я имею на данный момент и скрин того, что получилось. gradient-cards это класс самого градиента: background: 'linear-gradient(71.92deg, #44B3FF 0%, #FF73E1 72.4%)'

<div
    class="relative grid h-[1000px] w-[1300px] grid-cols-[repeat(4,minmax(300px,300px))] grid-rows-3 gap-5 p-5 font-serif text-white shadow gradient-cards"
  >
  <div class="card flex h-[300px] w-[300px] flex-col items-center gap-y-[30px] rounded-3 bg-transparent p-5 shadow">
    <img src="" alt="Вот и нет картинки" class="h-[150px] w-[260px] bg-[#E4E4E4] text-black-blue" />
    <p class="text-center text-h3">Пара строчек текста</p>
  </div>
  <div class="card flex h-[300px] w-[300px] flex-col items-center gap-y-[30px] rounded-3 bg-transparent p-5 shadow">
    <img src="" alt="Вот и нет картинки" class="h-[150px] w-[260px] bg-[#E4E4E4] text-black-blue" />
    <p class="text-center text-h3">Пара строчек текста</p>
  </div>
  <!-- . . . -->
</div>

И изображение того, что имеется.на данный момент. введите сюда описание изображения

css javascript html tailwind tailwindcss
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Как оказалось, есть background-attachment (или же в tailwind - bg-fixed), который красиво решает эту задачу. Может не идеально (т.к. градиент идёт от края экрана к другому краю), но довольно круто.

Вот пример:

<div class="container mt-10 flex flex-wrap gap-5 font-serif text-white">
  <div class="card flex h-[300px] w-[300px] flex-col items-center gap-y-[30px] rounded-3 bg-fixed p-5 gradient-cards">
    <img src="" alt="Вот и нет картинки" class="h-[150px] w-[260px] bg-[#E4E4E4] text-black-blue" />
    <p class="text-center text-h3">Пара строчек текста</p>
  </div>
  <!-- И ещё 4 таких div-а -->
</div>

Пример-итогового-результата