gpt4 book ai didi

html - 如何使用 CSS/HTML 使背景图像进入 "background"

转载 作者:太空宇宙 更新时间:2023-11-03 20:54:58 25 4
gpt4 key购买 nike

我想用背景图片填充我的页面,并使文本与该背景对齐。使用以下代码,背景图像加载到页面顶部,文本位于其下方。我知道我可以使用“背景:”功能,但在我下面的代码中完成的方式允许自动调整大小,无论浏览器大小如何(即移动设备的浏览器尺寸较小)。所以,我只希望背景图像位于文本后面。

<html>
<head>

<title>Title</title>

<style>

img.bg
{
min-height: 100%;
min-width; 781;

width: 100%;
height: auto;

top: 0;
left: 0;

z-index: -1;
}

@media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}

#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}

#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}

p
{
font: 14px Georgia;
}

</style>

</head>

HTML

<img class="bg" src="background.jpg">

<div id="container">

<div id="left">
<p>
Text
</p>
</div>

</div>

</body>
</html>

最佳答案

让 BG 图片的 z-index 为 1,#container div 的 z-index 为 2。这样行吗?

img {
position: relative;
z-index: 1;
}

#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}

关于html - 如何使用 CSS/HTML 使背景图像进入 "background",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11543938/

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