CSS背景渐变，顶部

下面

嗨是我想要的CSS来实现图像： enter image description here

正如你可以看到我有一个梯度在上面的图案，图案本身看起来像这样： enter image description here

这种模式在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; }

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

你可以检查我的小提琴看到这个工作在行动，谢谢。

来源

2014-12-30 mdixon18

使用位置固定的z-index -1并把它作为独立的DOM元素无子女:) – Zentoaku

最后一件事我想要做的就是使用固定的位置，因为它们会在这两个元素内和下面有更多的内容：/ – mdixon18

只需将它们分配给z-index为-1就可以了h的位置绝对大声笑，谢谢 – mdixon18

你可以做的是

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

来源

2014-12-30 13:59:15 MegaMind

这是行不通的：http://jsfiddle.net/v82Luxfc/1/ – mdixon18

我很抱歉保持的立场：绝对，它会工作。对不起，错误 – MegaMind

即使位置是绝对的，标题标签内的内容也有不透明的问题：http://jsfiddle.net/v82Luxfc/2/ – mdixon18

这解决了问题，遗憾的是，需要用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/

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

来源

2014-12-30 14:09:36 indubitablee

谢谢！这确实有用！ – mdixon18

不过，我已经提供了我自己的答案，以使这个更响应我将不得不依靠JavaScript，但这绝对不会工作:) – mdixon18

FIDDLE GOES HERE

我设法弄清楚，主要是基于c通过@Zentoaku

提供omment

我已经应用于背景梯度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%以确保它符合父元素大小。

来源

2014-12-30 14:11:45 mdixon18

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

.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-重复（是重复默认）和一些浏览器前缀。（我不确定-ms-linear-gradient来自哪里，第一个支持梯度的MS浏览器允许你使用标准化语法）

当然，这种方法的缺点是不适用于旧版浏览器。我相信IE9是最早支持多种背景的，IE10是最早支持渐变的。

来源

2014-12-30 14:24:38 Katana314

不错，但我需要不透明度设置在pattern.jpg – mdixon18

你会得到在Photoshop中使图像达到50％透明效果相同的效果？或者，你不允许修改它吗？ – Katana314

图案基本上有一个渐变。这会根据浏览器的大小而有所不同，所以我不能这样做：/ – mdixon18

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

来源

2014-12-31 07:30:24 Zentoaku

CSS背景渐变，顶部

回答

相关问题