gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:04:13 24 4
gpt4 key购买 nike

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

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

我已经尝试了 <> 方法但没有产生任何结果,我尝试了“分区类”方法,我的形象出现了!但是,它被我的其他两个背景/部分覆盖/覆盖了。

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

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

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

WWWWWWWWWWW

OOOOOOOOOOO <-- 分隔图像,smack center,覆盖两者

BBBBBBBBBB

BBBBBBBBBB <-- 黑色背景/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">

.....

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

最佳答案

这必须有效:

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

关于HTML/CSS 图像分隔符/分隔符叠加/方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39500861/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com