CSS垂直中間邊界

我想要實現以下使用CSS：（重點對照片的中間部分）CSS垂直中間邊界

screenshot

我第一次嘗試是這樣的：

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

但後來我無法在中間創建彩色線條。（糾正我，如果我錯了？）

我假設一個更好的方法是創建一個50％的高度div，然後創建一個浮動div的照片。

我使用的引導不是很適合垂直對齊，所以我嘗試使用這個FlexBox。

任何幫助將不勝感激，謝謝。

來源

2014-09-28 Ronen Teva

本教程有你需要的所有梯度：http://css-tricks.com/css3-gradients/。 – emmanuel 2014-09-28 17:37:27

您可以爲一個元素指定多個背景圖像（包括漸變），例如，

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%; 
 
}

來源

2014-09-28 18:33:38

CSS垂直中間邊界

回答

相關問題