问HTML/CSS图像分隔符/分隔符覆盖/方法？
EN

Stack Overflow用户

提问于 2016-09-14 22:58:14

回答 3查看 1.9K关注 0票数 1

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

我看了像Using an image as a separator in HTML and 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">

.....

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

html

css

background

divider

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-09-19 01:10:24

但是，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">

似乎我只需要将我的Halloweeny添加到第二部分，添加一个:before标签，并在块中添加它，然后添加一个top和一个内容等等。

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

票数 0

Stack Overflow用户

发布于 2016-09-15 10:10:45

这必须行得通：

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