HTML/CSS图像分隔符/分隔符覆盖/方法？
我已经摆弄了足够多的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">
.....如您所见，它位于两个部分之间。
回答 3
Stack Overflow用户
发布于 2016-09-19 09: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，最感谢帮助我的朋友！:)
Stack Overflow用户
发布于 2016-09-15 18: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;
}Stack Overflow用户
发布于 2016-09-15 14:23:01
1)您可以创建一个div来包装2节和图像分割线，并设置为相对位置
2)将你的类Halloweeny设置为绝对位置，顶部0，底部0，左侧0，右侧0，自动边距和z索引10应该可以
我想这应该可以了。不知道这是不是你想要的。
如果你能把你的代码放在codepen或jsfiddle中以备将来的问题，那就更好了。
https://stackoverflow.com/questions/39500861
复制相似问题
腾讯云开发者
