html - 导航栏按具有线性渐变的颜色/图像水平分割

Question

我正在尝试创建一个 bootstrap 导航栏，它的上半部分是某种颜色，不透明度为 0.9，后面有一个背景图像，下半部分是完全透明的(不透明度为 0)，只显示主体的颜色/背景-图片。

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

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 的背景图像相同。

我想做的是以某种方式分配“,url(”/someNavbarTexture.png”);”到线性渐变的前两行(这似乎是不可能的)。

有没有更简单的方法可以用 CSS 实现这种效果？ (我真的不在乎我是否最终使用线性渐变!)感谢您的任何想法。

---

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

这是一个解释我在说什么的链接...

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

Answer 1

我能看到的唯一方法是使用绝对定位且占容器高度 50% 的伪元素(如果您愿意，也可以是 div)。

/* 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>