导航栏按颜色/图像以线性渐变水平拆分

d3wannabe 发表于 Dev

d3wannabe

我正在尝试创建一个引导导航栏，该导航栏的上半部分具有某种特定的颜色，具有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

保利

我能看到的唯一方法是使用绝对位置为容器高度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;
}