网页背景随内容展开

Question

我正在做一个html/css项目，我的网页背景有问题。我在代码的末尾添加了一个注释字段，问题是“固定的”-value似乎并不关心我是否添加了注释-> --它将保持相同的大小，我的注释显示在图片下面。

我尝试在我的伪类包装器中更改值:after，我可以将高度更改为任何固定大小，但是我希望它是“增长”的，并添加了注释。

我会感谢任何帮助，并创造了一个小提琴，以更好地理解：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>

​

Answer 1

在调整浏览器大小时，我只注意到了背景的问题。你的“这个”内容没有包含在背景中，这就是我认为的问题所在。

主要问题：

你在你的.main上使用.main。绝对定位，特别是在父容器上，的响应能力不强。我将您的位置从absolute改为position: relative;，这解决了您的背景，涵盖了所有屏幕上的内容问题。

次要问题：

既然您的背景已经正确地覆盖了内容，那么在"TAGEBUCH“和背景开始的位置之间就会有一个大的白条。这要归功于您的margin-top: 5%;类上的.wrapper。您可以通过将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，这将有助于在未来的反应。

Answer 2

伪元素是::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;
  }