gpt4 book ai didi

css - 重复背景不填充具有百分比相对绝对位置的容器div

转载 作者:行者123 更新时间:2023-11-28 12:39:37 25 4
gpt4 key购买 nike

我正在使用具有相对和绝对定位以及百分比的页面。 HTML & Body 设置为 100%,容器 div 是相对的,内部 div 是绝对的。我为容器 div 设置的重复背景图像没有填满页面 - 它在中途停止了,为什么?提前致谢!

这是我得到的:

<style type="text/css">
html, body {
width:100%;
height:100%;}

.container {
width:1000px;
height:100%;
background-image:url('background.jpg');
position: relative;
margin-left:auto;
margin-right:auto;
}
.header {
width:1000px;
height:300px;
background-color:#ffffff;
position: absolute;
top:0px;
left:0px;
}


.content {
width: 680px;
position:absolute;
top: 350px;
left: 310px;
}

.post {
width: 630px;
padding: 20px;
padding-top: 50px;

}

.title {
width: 650px;
height: 20px;
padding: 10px;
position: absolute; left: -10px; top: 10px;
}




</style>

<body>
<div class="container">

<div class="header">
Placeholder for header image.
<p><a href="index.html">Home</a></p>
</div>


<div class="content">
<div class="post">
<div class="title">Welcome</div>

<img src="PLACEHOLDER.JPG" alt="Proposal Photo" width="630" />
</div>
</div>
</div>

最佳答案

这就是你想要的? Fiddle

只需在 div.container 元素中添加这条 CSS 规则

background: url('Your URL') repeat;

如您所见,我使用了速记属性。

顺便说一句,只需将 htmlbody 中的 height 添加到 100%(您将获得与添加 相同的结果code>heightwidth 属性)。

html, body {
height: 100%;
}

关于css - 重复背景不填充具有百分比相对绝对位置的容器div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17763925/

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