Imageoverlay绘制文本

Question

嘿我对图像叠加有一点问题，但首先是完整的故事。我目前正在创建一个艺术家单页主页，具有基于引导程序的视差效果。我使用本教程创建了一个基本模板：http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/。 这看起来很不错：

但是我的照片看起来并不太好（是的，它已经在节日中使用了nexus 5而我没有找到任何免费的东西）。所以我决定用一个小条纹图案进行叠加（因为我觉得它看起来很酷）：

HTML：

<section id="start">
    <div class="overlay"></div>
    <div class="text-vcenter">
        <h1>Welcome</h1>
        <h3>at the homepage of %NAME%</h3>
        <a href="#welcome" class="btn btn-primary btn-lg">Continue</a>
    </div>
</section>

CSS：

.overlay
{
    background: url('../images/overlay.png');
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
#start
{
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    background: url('../images/backgrounds/home.png') no-repeat center center fixed;
    background-size: cover;
}

overlay.png是一张3x3的小图片：

结果：

背景图片现在看起来非常酷（你可能没有在图片中看到它，因为它被重新压缩），但条纹叠加在文本上..

但是为什么？我见过很多其他使用类似代码的网站，没有问题......

有没有人知道一个有免费覆盖图像的网站（比如这样的条纹，或者我还看过动画噪声图像）？

编辑：现在我想办法用z-index做到这一点，但它不是很好......如果我将z-index -10添加到图片和z-索引-5到覆盖它不会覆盖文本（带正数的正常z-index不起作用：/）

Answer 1

div上的

z-index包含您的文本需要设置为高于div包含条带覆盖。或者用rgba（数字，数字，数字，alpha）更改aplha以设置透明度。

Answer 2

请勿在此处使用z-index。正确的解决方案是将背景放在父容器上，其“欢迎”文本元素和按钮是子容器。

示例：http://jsbin.com/gexosa/1/edit