Question

我试图创建一个自举导航栏，其上半部分为某种颜色，0.9不透明度，背后有背景图像，下半部分完全透明（不透明度0）只显示身体＆＃ 39; s 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个不同颜色的部分方面效果很好，但问题是＆＃34; someNavbarTexture.png＆＃34;应用于错误的一半（导航栏的下半部分），实际上只是做与html，body的背景图像相同的工作。

我想做的是以某种方式分配＆＃34;，url（＆＃34; /someNavbarTexture.png"）;＆＃34;到线性渐变的前两行（这似乎是不可能的）。

使用CSS有没有更简单的方法来实现这种效果？（如果我最终使用线性渐变，我真的不在乎！）感谢任何想法。

-------- --------- EDIT

这是一个解释我正在谈论的内容的链接......

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>

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

-------- --------- EDIT

1 个答案: