HTML/CSS 图像分隔符/分隔符叠加/方法？

Question

我已经把 CSS 示例和 HTML 搞得一团糟，足以创建一个时尚的（在我看来）网站。 我有两个 CSS（部分）的背景图像，它们都调用我的 style.css 文件中的元素将它们的背景着色为黑色和白色。 但是，我想在这两个部分之间有一个图像分隔符。

我查看了诸如在 HTML 和 CSS中使用图像作为分隔符之类的文章，但对我没有帮助。

我尝试了 <> 方法但没有结果，我尝试了“div class”方法，我的图像出现了！ 然而，它被我的另外两个背景/部分覆盖/覆盖。

如何放置我的图像，使其位于我的两个部分中背景颜色分离的中间，以及如何使其覆盖我的两个部分/背景？

让我用 ASCII 艺术画我想要的样子..

WWWWWWWWWWW <-- 白色背景/CSS 部分

WWWWWWWWWWW

OOOOOOOOOOO <-- 分隔图像，拍中心，覆盖两者

BBBBBBBBBBB

BBBBBBBBBBB <-- 黑色背景/CSS 部分

谢谢，如果我需要进一步澄清我的问题，我很乐意！

这是我的styles.css 代码

.Halloweeny {
        height:100px;
        width: 100 % ;
        background: url('/images/halloween.png');
        background-position: 50% 50%;
        z-index: 99;
}

这是我的 index.php 代码

....

</section>

<div class="Halloweeny"></div>

        <!-- Image section -->
        <section class="image-section red" id="image-section">

.....

如您所见，它位于两个部分之间。

Answer 1

这必须工作：

.Halloweeny{ 
         height:100px;
         width: 100 % ;
         background: url('/images/halloween.png') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
    }

Answer 2

1）您可以创建一个div来包裹2节和图像分隔符并设置为相对位置

2）将你的班级设置为绝对位置，顶部 0，底部 0，左 0，右 0，边距自动和 z-index 10 应该没问题

我认为应该这样做。 不确定这是否是你想要的。

如果您可以将代码放在 codepen 或 jsfiddle 中以备将来的问题，那就太好了。

Answer 3

你的回答都没有让我做对，但是，Joel Bonet Rodriguez 用他的代码片段帮了我最大的忙。

我四处询问，并从我的一个朋友那里得到了答案，他制作了一个 JSFiddle 供我复制。

https://jsfiddle.net/s7sLujgc/2/

 /*   Here is my final code, that works. */

CSS：

.Halloweeny:before {
        content: "";
        position: relative;
        top: -79.5px;
        display: block;
        height:185px;
        width: 120 % ;
         background: url('/images/halloween.png') center center;
        -webkit-background-size: cover;  /* <--                        */
         -moz-background-size: cover;   /* <-- I'm not sure these do  */
         -o-background-size: cover;    /* <-- anything at all        */
    }

HTML：

<section class="image-section red back Halloweeny" id="image section">

看来我只需要将我的万圣节添加到第二部分，并添加一个 :before 标签，然后将其添加到块、顶部和内容等等。

感谢所有帮助过我的人，+1 Joel，最感谢帮助我的朋友！ :)