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垂直中间边界

回答

相关问题