HTML/CSS 图片 Divider/Seperator Overlay/Methods?

Question

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

我看了类似的文章 Using an image as a separator in HTML and CSS 那对我没有帮助。

我试过<>方法没有结果，我试了 "div class" 方法，我的形象出现了！但是，它被我的另外两个 backgrounds/sections.

覆盖了 up/overlayed

如何放置我的图像，使其恰好位于我的两个部分中背景颜色分离的中间，以及如何制作它以覆盖我的两个部分 sections/backgrounds?

让我用 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

1) 您可以创建一个 div 来包裹 2 部分和图像 divider 并设置相对位置

2) 将你的 class Halloweley 设置为绝对位置，top 0，bottom 0，left 0，right 0，margin auto 和 z-index 10 应该没问题

我认为应该可以。不确定这是不是你想要的。

如果你能把你的代码放在codepen或jsfiddle中以备日后提问就好了。

Answer 2

这一定有效：

.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 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，最感谢帮助我的好友！ :)

HTML/CSS 图片 Divider/Seperator Overlay/Methods?

HTML/CSS Image Divider/Seperator Overlay/Methods?

html

css

background

divider