CSS вертикальной средней границы

Question

Я пытаюсь достичь с помощью следующей CSS: (фокус на средней части фото)

Моя первая попытка была что-то вроде:

<div style="background:blue;height:200px"></div> 
<div style="background: linear-gradient(blue 50%, #ffffff 50%);> 
    <img...><img...><img...> 
</div> 

Но тогда у меня нет способа создать цветную линию посередине. (Исправьте меня, если я ошибаюсь?)

Я предполагаю, что лучший способ - создать 50% высоты div, а затем создать плавающий div для фотографий.

Я использую бутстрап, который не подходит для вертикального выравнивания, поэтому я попытался использовать этот FlexBox.

Любая помощь будет очень признательна, спасибо.

Answer 1

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

html, body { 
 
    height: 100%; 
 
    min-height: 350px; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: #006; 
 
    background-image: 
 
     linear-gradient(to right, #f00, #ff0 25%, #0f0 50%, #0ff 75%, #00f), 
 
     linear-gradient(to top, #fff, #fff), 
 
     radial-gradient(circle closest-side at center, 
 
     rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%, 
 
     rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,   
 
     rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%, 
 
     rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%, 
 
     rgba(255,255,255,.0) 100%), 
 
     radial-gradient(circle closest-side at center, 
 
     rgba(255,255,255,1) 0%, rgba(255,255,255,1) 39%, 
 
     rgba(255,255,255,.7) 40%, rgba(255,255,255,.7) 59%,   
 
     rgba(255,255,255,.4) 60%, rgba(255,255,255,.4) 79%, 
 
     rgba(255,255,255,.1) 80%, rgba(255,255,255,.1) 99%, 
 
     rgba(255,255,255,.0) 100%); 
 
    background-size: 100% 4px, 100% 50%, 62.5% auto, 62.5% auto; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%, 50% 100%, 0 50%, 100% 50%; 
 
}