Блог

Главная - Вопросы по программированию - разделите один фон изображения на несколько разделителей с разной высотой

разделите один фон изображения на несколько разделителей с разной высотой

#html #css

Вопрос:

Посмотрите на фрагмент ниже, у меня есть дивы, которые обрезают фон. Я использовал свойство css отображения таблицы. Но я хочу, чтобы эти дивы были разной высоты. Я не могу использовать таблицу, потому что каждая ячейка таблицы будет иметь одинаковую высоту. Я хочу, чтобы эти дивы были разной высоты.

 .blocks {
    display:table-row;
}

.block {
    display:table-cell;
    height:100px;
    border:15px solid #FFF;
}

#background-container { 
    display:table;
    width:100%;
    border-collapse:collapse;
    box-sizing:border-box;
    background: url(https://images.unsplash.com/photo-1538867468559-b14ead85b729?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;auto=formatamp;fit=cropamp;w=1051amp;q=80) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
         
 <div id="background-container">
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="blocks">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Ответ №1:

Вот еще одна идея, в которой вы применяете фон к псевдоэлементу и размещаете его относительно основного контейнера, а затем обрезаете наложение.

Используя приведенное ниже, вы можете иметь разную ширину/высоту для своих элементов:

 .block {
  height: 100px;
  width: 18%;
  flex-grow:1;
  margin:15px;
  -webkit-mask:linear-gradient(#fff 0 0); /* hide the overflow */
}

/* the same background applied to all */
.block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(https://images.unsplash.com/photo-1538867468559-b14ead85b729?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;auto=formatamp;fit=cropamp;w=1051amp;q=80) center/cover;
}
/**/

#background-container {
  position: relative; /* relative here */
  display:flex;
  flex-wrap:wrap;
} 
 <div id="background-container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Здесь также подходит конфигурация сетки CSS:

 .block {
  -webkit-mask:linear-gradient(#fff 0 0); /* hide the overflow */
}
.block:nth-child(odd) {
  grid-row:span 2;
}

/* the same background applied to all */
.block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(https://images.unsplash.com/photo-1538867468559-b14ead85b729?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;auto=formatamp;fit=cropamp;w=1051amp;q=80) center/cover;
}
/**/

#background-container {
  position: relative; /* relative here */
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:50px;
  grid-gap:15px;
} 
 <div id="background-container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Комментарии:

1. Можете ли вы предложить метод без элементов psuedo?? @TemaniAfif

Метки: