css背景渐变，顶部有不透明图案

Question

小提琴在这里

下面是我试图在 CSS 中完成的图像：

正如你所看到的，我有一个顶部有图案的渐变。 模式本身看起来像这样：

photoshop 中的这个图案具有 50% 的不透明度，使其具有我在第一张图像中的外观。

所以对于 HTML 和 CSS，我认为我需要两个元素来完成这个，就像这样：

<header class="header background-gradient" id="header">
    <div class="background-pattern">
       // contents
    </div>
</header>

现在，我尝试的是以下内容：

.background-gradient {
  background: #4261cf;
  background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
  background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
  color: white; }

上面是看起来很完美的渐变效果，现在我在与模式斗争的地方，如果我像这样在 css 中应用模式：

.background-pattern {
  background: url(../images/pattern.jpg) repeat;
  opacity: .5; }

我现在面临的问题是所有子元素都采用 0.5 不透明度，我不知道如何避免这种情况？

您可以查看我的小提琴以查看此操作。

Answer 1

这解决了问题，不幸的是需要绝对位置才能使用 z-index。 您选择是否使用它。

<header class="header background-gradient" id="header">
    <div class="background-pattern">
    </div>
</header>
<h1>Main Title</h1>

h1 {
 color: white;
 text-align: center;
 padding-top: 100px;
    margin-top:-500px;
    z-index:10;
    position:absolute;
    width:100%;
}

（缩进的东西是新的 css，我只是从标题元素中取出 h1）

更新小提琴： http : //jsfiddle.net/v82Luxfc/7/

（漂亮的渐变顺便说一句，看起来很恶心！）

Answer 2

你能做的是

 <header class="header background-gradient" id="header">
<div class="background-pattern"></div>

// contents

</header>

现在

 .background-pattern {
background: url(../images/pattern.jpg) repeat;
position : absolutel;
opacity: .5; }

Answer 3

小提琴在这里

我主要根据@Zentoaku 提供的评论设法弄清楚了

我已经申请了背景渐变 css：

.background-gradient {
  position: relative;
  z-index: -1;
 // also here the gradient
}

.background-pattern {
  position: absolute;
  z-index: -1;
  // here the pattern image and opacity
}

希望这可以帮助其他人做同样的事情

编辑：您还应该确保将.background-pattern设置为100%的height ，以确保它适合父元素的大小。

Answer 4

看起来已经有一个合适的答案，但我想我会再提出一个不同的答案。 一些较新的浏览器允许您将多个背景图像（或渐变）叠加在一起。 结果看起来像这样：

.background-gradient {
  background: #4261cf;
  background-image: url(../images/pattern.jpg), -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%) ;
  background-image: url(../images/pattern.jpg), -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
  background-image: url(../images/pattern.jpg), linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
}

（未测试）

由于它有很多 CSS，我决定尝试省略 bg-repeat（默认为重复）和一些浏览器前缀。 （我不确定-ms-linear-gradient来自哪里。第一个支持渐变的 MS 浏览器允许您使用标准化语法）

当然，这种方法的缺点是不能在旧浏览器上工作。 相信IE9最早支持多背景，IE10最早支持渐变。

Answer 5

http://jsfiddle.net/5sbn1fn6/2/

HTML：

<header class="header background-gradient" id="header">
    <h1><a href="#">Main Title</a></h1>
    <div class="background-pattern"></div>
</header>

CSS：

header {
  height: 500px; 
  width: 100%; }
.background-gradient {
  position: relative;
  background: #4261cf;
  background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
  background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
  color: white;
position: relative;}

header > * {
    position: relative;
    z-index: 3;
}

.background-pattern {
  position: absolute;
  background: url(http://i1091.photobucket.com/albums/i392/matid1994/pattern.jpg) repeat;
  opacity: .5;
  height: 500px; 
  width: 100%;
  left: 0;
  top:0 ;
  z-index: 1;
}

h1 {
  color: white;
  text-align: center;
  padding-top: 100px;
  z-index: 3;
}
h1 a {
    color: white;
}
}