时间戳

首页 > 解决方案 > 为什么当我将 div 设置为响应式正方形时，div 的背景颜色没有显示？

html - 为什么当我将 div 设置为响应式正方形时，div 的背景颜色没有显示？

问题描述

我正在尝试制作此致敬页面，并且由于我制作的框（表单字段所在的位置）不断与上面的标题重叠，因此我试图使框响应。但是，背景颜色在我完成后消失了，我不知道如何从那里开始。顺便说一下，这是 HTML 代码。

<body>
  <div id="maintitle-div"><h1 id="maintitle" class="maintitle">atrovska</h1></div>
  <div class="box"> 
    <div class="content">
      <h1 id="title"> Tell us how we're doing! </h1>
      <p id="description"> Your feedback matters to us and rest assured we will use this to improve our services even further. </p>
      <form id="survey-form">
        <label id="name-label">
          Name <br> <input type="text" id="name" placeholder="Enter your Name" required> </label><br>
  <label id="email-label">
    Email <br> <input type="email" id="email" placeholder="Enter your Email" required></label>
    <label id="number-label">
    <input type="number" id="number" placeholder="Enter your phone number" required max="1" min="5">Number</label> 
  <p>What services did you avail?</p>
  <select name="services" id="dropdown">
    <option value="Internet">Internet </option>
    <option value="Data">Data</option>
    <option value="Post-paid">Post-Paid</option> </select><br>
  <p> Please select your service provider.</p>
  <input type="radio" name="provider" value="globe">Globe
  <input type="radio" name="provider" value="globe">Globe
  <input type="radio" name="provider" value="globe">Globe
  <p> Please select your service provider.</p>
  <input type="checkbox" name="provider" value="globe">Globe
  <input type="checkbox" name="provider" value="globe">Globe
  <input type="checkbox" name="provider" value="globe">Globe
  <textarea></textarea>
    
  <button type="submit" id="submit">Submit</button>
</form>
  
  </div>
    
  </div></body>

这就是 CSS。

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --color-darkBlue: rgb(66, 7, 188);
}

body {
  background-image: url(https://i.pinimg.com/originals/6d/25/f2/6d25f2bc9f8c59dc9d5fbab6809126f8.jpg);
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

#maintitle {
  font-family: 'Press Start 2P', cursive;
  color: rgb(255, 201, 14);
  margin-top: 5px;
  font-size: 48px;
  margin: 30px 0 30px auto;
  text-align: center;
  
}
.header {
  padding: 0 0.625rem;
  margin-bottom: 1.875rem;
}

.box {
  border-radius: 15px;
  position: relative;
  width: 50%;
  margin: 0 auto;
  background-color: white;
  
  
}

.box::after {
  content: "";
  display: block;
  padding-bottom; 100%;
  width: 100%;
  height: 100%;
  background-color: white;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
}

#title {
  font-family: 'Fredoka One', cursive;
  color: var(--color-darkBlue);
  margin-top: 5px;
  font-size: 24px;
  margin-bottom: 2px;
  text-align: center;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: rgb(66, 7, 188);
  font-size: 8px;
}

#description {
  font-weight: 900;
  font-size: 14px;
  margin-top: 10px;
}

#survey-form {
  margin: 5px 0 5px auto;
}

input {
  margin: 6px 0 5px auto;
}

#survey-form {
  font-family: 'Open Sans', sans-serif;
  color: black;
  font-size: 11px;
}

标签： htmlcssresponsive-designbackground-color

解决方案

您的代码中有 CSS 语法错误。

.box::after {
  content: "";
  display: block;
  padding-bottom; 100%;
  width: 100%;
  height: 100%;
  background-color: white;
}

应该：

.box::after {
  content: "";
  display: block;
  padding-bottom: 100%;
  width: 100%;
  height: 100%;
  background-color: white;
}

结束然后将 .content 类赋予背景颜色作品：

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}

将内容背景绘制为红色。

推荐阅读