要随内容展开的网页背景

我正在处理一个html/css项目，我的网页背景有问题。我在代码的末尾添加了一个注释字段，问题是"；固定的"-value似乎不在乎我是否添加评论->它将保持不变的大小，我的评论显示在图片下方。在这里输入图片描述

我尝试在我的伪类包装器中更改值：之后，我可以将高度更改为任何固定大小，但我希望它是"；"成长"；并添加了评论。

我非常感谢任何帮助，并制作了一把小提琴以更好地理解：https://jsfiddle.net/w0h4bayn/2/

.wrapper {
position: relative;
clear: both;
background-size: cover;
background: url("../images/background3.jpg") top center fixed;
text-transform: uppercase;
}

/*Pseudoklasse für Anzeige des Hintergrundbildes*/

.wrapper:after {
padding-top: 75%;
display: block;
content: '';
min-height:100%
}

<div class ="wrapper">
<div class="main">
<h2>Neuer Tagebuch-Eintrag</h2>
<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
Vorname<br />
<input type="text" name="vorname" value="" /><br /><br />
Name<br />
<input type="text" name="name" value="" /><br /><br />
Dein Eintrag<br />
<textarea rows="10" cols="60" name="eintrag"></textarea>
<br />
<input type="file" name="datei"><br>
<input type="submit" name="submit" />
</form>
<br />                         
<div>
<h3>Kommentare:</h3>
This<br>
This<br>
This<br>
This<br>This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
</div>
</div>

我只是在调整浏览器大小时才注意到您的背景问题。您的"；这个"；内容没有包含在后台，这就是我认为的问题所在。

主要问题：

您正在.main上使用absolute positioning绝对定位，特别是在父容器上的响应不是很快。我把你的定位从absolute改为position: relative;，这解决了你在所有屏幕上报道内容的背景问题。

次要问题：

既然你的背景已经完全覆盖了内容；TAGEBUCH"；以及背景从哪里开始。这是由于.wrapper类上的margin-top: 5%;。您可以通过将overflow: scroll;添加到.wrapper父div中来修复此边距，这最终解决了这个问题。

.body{
background-color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.header {
padding: 20px;
text-align: center;
text-transform: uppercase;
background: #04862b8c;
color: white;
}

/*Animation Header*/
.header h1{
font-size: 30px;
animation-delay: .4s;
}  
.header p {
font-size: 20px;
animation-delay: .6s;
}
.title-animation {
animation: pop-in 1s ease-out forwards;
opacity: 0;
}
.subtitle-animation {
animation: left-to-right 1s ease-out forwards;
opacity: 0;
}

/*Formatierung div-element*/
.wrapper {
position: relative;
clear: both;
background-size: cover;
background: url("https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") top center fixed;
text-transform: uppercase;
overflow: scroll;
}

/*Pseudoklasse für Anzeige des Hintergrundbildes*/

.wrapper:after {
padding-top: 75%;
display: block;
content: '';
min-height:100%
}

.main {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: left;
margin-top: 5%;
padding-left: 15em;
}
/*Form-Formatierung*/
textarea {
caret-color: rgb(25, 0, 255);  
width: 60em;
height: 15em;
border: 1px solid #cccccc;
padding: 0.5em;
font-family: Tahoma, sans-serif;
resize: none;
}
form {
caret-color: rgb(25, 0, 255);  
padding: 0.5em;
font-family: Tahoma, sans-serif;
}
/*Keyframes*/
@keyframes pop-in {
0% {
opacity: 0;
transform: translateY(-4rem) scale(.8);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes left-to-right {
0% {
opacity: 0;
transform: translateY(-4rem) scale(.8);
}
100% {
opacity: 1;
transform: none;
}
}

<html>
<head>
<title>Online-Tagebuch</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head>
<body class="body">
<div class = "header">
<h1 class="title-animation">Tagebuch</h1>
<p class="subtitle-animation">Das Online Tagebuch</p>
</div>
<div class ="wrapper">
<div class="main">
<h2>Neuer Tagebuch-Eintrag</h2>
<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
Vorname<br />
<input type="text" name="vorname" value="" /><br /><br />
Name<br />
<input type="text" name="name" value="" /><br /><br />
Dein Eintrag<br />
<textarea rows="10" cols="60" name="eintrag"></textarea>
<br />
<input type="file" name="datei"><br>
<input type="submit" name="submit" />
</form>
<br />                         
<div>
<h3>Kommentare:</h3>
This<br>
This<br>
This<br>
This<br>This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
This<br>
</div>
</div>
</div>
</body>
</html>

未来项目注意：尽可能远离绝对定位，尤其是在父元素上。绝对定位对图像、按钮、段落等都很有效。我将成为flex-box的专家，这将有助于未来的响应能力。

伪元素是::after，但这里似乎没有必要。更改背景属性应该可以解决您的问题。

.wrapper {
position: relative;
clear: both;
background: url("https://images.pexels.com/photos/261579/pexels-photo-261579.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") no-repeat;
background-size: 100%;
text-transform: uppercase;
}

相关内容

最新更新

热门标签：