Question

我已经搞乱了CSS示例和HTML，足以创建一个时尚（在我看来）网站。我有CSS（部分）的两个背景图像，它们都调用我的styles.css文件中的元素，将它们的背景颜色设置为黑色和白色。但是，我希望在这两个部分之间有一个图像分割器。

我看过像这样的文章 Using an image as a separator in HTML and CSS 那对我没有帮助。

我试过＆lt;＆gt;方法并没有产生任何结果，我试过了 “div class” 方法，我的形象出现了！但是，它被我的另外两个背景/部分覆盖/覆盖。

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

让我用ASCII艺术画出我希望它的样子......

A::B＆lt; - 白色背景/ CSS部分

WWWWWWWWWWW

WWWWWWWWWWW＆lt; - 分割器图像，咂嘴中心，覆盖两者

OOOOOOOOOOO

BBBBBBBBBBB＆lt; - 黑色背景/ CSS部分

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

这是我的styles.css的代码

BBBBBBBBBBB

这是我的index.php

中的代码

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

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

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">

似乎我只需要将我的万圣节添加到第二部分，然后在标记之前添加：添加它，然后将其添加到块中，顶部和内容以及所有内容。

感谢所有帮助过的人，+1乔尔，并且最感谢帮助我的哥们！：）

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

3 个答案: