gpt4 book ai didi

css 防止图像形式扩大 body 高度

转载 作者:太空宇宙 更新时间:2023-11-04 04:53:52 25 4
gpt4 key购买 nike

我一直试图阻止我的背景图片扩大我的 body 高度,但没有成功。我希望主体仅在内容增加时展开,而不是我的背景图片。

这是一个代码片段:

body
{
background-color: #000000;
color: #FFFFFF;
font-family: Georgia, Verdana, Geneva, sans-serif;
overflow-x: hidden;
}

#background_container img
{
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -1250px;
z-index: -10;
}

<body>



<div id="background_container">

<img src="_images/main_background.jpg" width="2500" height="2003">

</div>

<div>

CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE

</div>

</body>

它应该可以工作,只有当我有更多内容时,主体的高度才会扩展,并且在这种情况发生之前不会有滚动条。

我根本不想使用任何 javascript。

提前致谢

最佳答案

试试这个 CSS:

body
{
background-color: #000000;
color: #FFFFFF;
font-family: Georgia, Verdana, Geneva, sans-serif;
overflow-x: hidden;
}
body > div
{
background-image: url(_images/main_background.jpg);
background-position: top center;
}

改用这个 html

<body>
<div>
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
CONTENT GOES HERE
</div>
</body>

DEMO - 我在演示中使用了一些外部图像,因为我不可能猜出你用什么作为背景。我将 contenteditable 添加到 div 并使用 javascript 将其聚焦,这样您就可以开始输入并查看随着 div 大小的增长背景如何随着 div 扩展。

关于css 防止图像形式扩大 body 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12869214/

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