css背景渐变与顶部的不透明图案

Question

FIDDLE GOES HERE

下面的大家好是我试图在CSS中完成的图片：

正如你所看到的，我在顶部有一个带有图案的渐变，图案本身如下所示：

photoshop中的这种模式具有50％的不透明度，使其具有第一张图像中的外观。

所以HTML＆amp; 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; }

我现在面临的问题是所有儿童元素都采用.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/

（漂亮的渐变btw，看起来很恶心！）

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

<强> FIDDLE GOES HERE

我已经成功地根据@Zentoaku提供的评论来解决这个问题

我已经应用了background-gradient 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设置为height 100%，以确保其符合父元素大小。

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;
}
}