导航栏水平分割 color/image 线性渐变

Question

我正在尝试创建一个 bootstrap 导航栏，其上半部分为特定颜色，不透明度为 0.9，后面为 background-image，下半部分为完全透明（不透明度为 0 ) 仅显示 body 的 color/background-image.

我已经玩了几个小时的线性渐变试图达到这种效果，但我得到的最接近的是...

html, body { 
  height: 100%;
  background-image: url("/someBackgroundTexture.png");
}

.theNavBar {

  background-image: 

    linear-gradient(
     to bottom, 
     rgba(127, 180, 220, 0.9) 0%,  /*opacity 0.9*/
     rgba(127, 180, 220, 0.9) 50%, /*opacity 0.9*/
     rgba(0, 0, 0, 0) 50%, /*transparent*/
     rgba(0, 0, 0, 0) 100% /*transparent*/
   )  
   ,url("/someNavbarTexture.png");

   height: 100%;
   width: 100%;
}

将导航栏分成 2 块不同颜色的效果很好，但问题是 "someNavbarTexture.png" 应用在错误的一半（导航栏的下半部分），实际上只是做与 html、body 的 background-image 相同的工作。

我想做的是以某种方式分配“,url("/someNavbarTexture.png");" linear-gradient 的前两行（这似乎是不可能的）。

有没有更简单的方法可以用 CSS 实现这种效果？（我真的不在乎我是否最终使用 linear-gradients 或不！）感谢您的任何想法。

--------编辑---------

这里 link 解释了我在说什么...

http://codepen.io/d3wannabe/pen/gPPmOv

Answer 1

我能看到的唯一方法是使用绝对定位的伪元素（或者 div，如果你愿意的话），它是容器高度的 50%。

/* Pen-specific styles */

html,
body {
  height: 100%;
  margin: 0;
}
/* Pattern styles */

.container {
  background-image: linear-gradient(to bottom, rgba(127, 180, 220, 0.9) 0%, rgba(127, 180, 220, 0.9) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  height: 100%;
  width: 100%;
  position: relative;
}
.container:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 50%;
  background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
  z-index: -1;
}

<section class="container">
  </div>

导航栏水平分割 color/image 线性渐变

Navbar split horizontally by color/image with linear gradient

html

css

linear-gradients

--------编辑---------