如何在调查表后面添加半透明矩形背景？ [复制]

Posted

技术标签:

【中文标题】如何在调查表后面添加半透明矩形背景？ [复制]【英文标题】：How can I add a semi-transparent rectangular background behind the survey form? [duplicate] 【发布时间】：2022-01-09 08:23:45 【问题描述】：

如何为调查表添加背景，比如他们是如何做到的here？

我说的是问题背后的小黑框，而不是紫色背景。

body 
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: center;


#description 
  font-style: italic;


.one-line 
  display: block;
  padding: 10px 0px 5px 0px;


.form-control 
  width: 500px;


#dropdown 
  width: 510px;


label 
  font-size: 20px;


#submit 
  margin: 10px;


#form-background 
  width: 200px;
  height: 200px;
  color: red;

<body id="body">
  <h1 id="title" class="text-center">Jollibee Order Form</h1>
  <p id="description" class="text-center">Welcome to Jollibee's order form! Hot, fresh, & juicy food all day long!</p>

  <form id="survey-form">
    <div>
      <label id="name-label" class="one-line">Name</label>
      <input type="text" id="name" placeholder="Enter your name" required class="form-control" />
    </div>

    <div>
      <label id="email-label" class="one-line">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required class="form-control" />
    </div>

    <div>
      <label id="number-label" class="one-line">Age</label>
      <input type="number" id="number" min="10" max="100" placeholder="Enter your age" required class="form-control" />
    </div>

    <div>
      <label class="one-line">Main</label>
      <select name="options" id="dropdown" class="form-control">
        <option value="option 1">Jolly Crispy Fried Chicken (spicy)
        </option>
        <option value="option 2">Jolly Crispy Fried Chicken (regular)
        </option>
        <option value="option 3">Original Chicken Sandwich </option>
        <option value="option 4">Spicy Fried Chicken Sandwich
        </option>
        <option value="Jolly Spaghetti">Jolly Spaghetti</option>
      </select>
    </div>

    <div>
      <label class="one-line">Drink</label>
      <input type="radio" name="radio buttons" value="radio
      1" />Pineapple Quencher
      <input type="radio" name="radio buttons" value="radio
      2" />Water
    </div>

    <div>
      <label class="one-line">Pie</label>
      <input type="checkbox" value="checkbox 1" />Banana Langka Pie
      <input type="checkbox" value="checkbox 2" />Peach Mango Pie
    </div>

    <div>
      <label class="one-line">Special order notes?</label>
      <textarea class="form-control"></textarea>
    </div>

    <input type="submit" id="submit" class="form-control" />
  </form>
</body>

<div id="form-background"></div>

【问题讨论】：

这个问题正在meta讨论。 【参考方案1】：

您可以简单地使用.container 并为其设置背景颜色。请查看我对您的代码所做的更改。对于另一张图片，您可以为您的身体设置一个background-image。

body 
  font-family: "Courier New", monospace;
  font-weight: 900;
  text-align: center;
  width: 100vw;
  height: 100vh;
  background-image: url('https://cdn.wallpapersafari.com/53/62/l6bruO.jpg');
  background-repeat: repeat-y;
  background-size: cover;


#description 
  font-style: italic;


.one-line 
  display: block;
  padding: 10px 0px 5px 0px;


.form-control 
  width: 500px;  


#dropdown 
  width: 510px;


label 
  font-size: 20px;


#submit 
  margin: 10px;


.container 
  width: 1000px;
  height: 600px;
  background-color: red;

<body id="body">
 <div class="container">
  <h1 id="title" class="text-center">Jollibee Order Form</h1>
  <p id="description" class="text-center">Welcome to Jollibee's 
  order form! Hot, fresh, & juicy food all day long!</p>

  <form id="survey-form">
    <div>
      <label id="name-label" class="one-line">Name</label>
      <input type="text" id="name" placeholder="Enter your name" required class="form-control"/>
    </div>
    
    <div>
      <label id="email-label" class="one-line">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required class="form-control"/>
    </div>
  
    <div>
      <label id="number-label" class="one-line">Age</label>
      <input type="number" id="number" min="10" max="100" placeholder="Enter your age" required class="form-control"/>
    </div>
    
    <div>
      <label class="one-line">Main</label>
      <select name="options" id="dropdown" class="form-control">
        <option value="option 1">Jolly Crispy Fried Chicken               (spicy)
        </option>
        <option value="option 2">Jolly Crispy Fried Chicken
        (regular)
        </option>
        <option value="option 3">Original Chicken Sandwich                 </option>
        <option value="option 4">Spicy Fried Chicken 
        Sandwich</option>
        <option value="Jolly Spaghetti">Jolly Spaghetti</option>
      </select>
    </div>
    
    <div>
      <label class="one-line">Drink</label>
      <input type="radio" name="radio buttons" value="radio   
      1"/>Pineapple Quencher
      <input type="radio" name="radio buttons" value="radio   
      2"/>Water
    </div>
    
    <div>
      <label class="one-line">Pie</label>
      <input type="checkbox" value="checkbox 1"/>Banana Langka Pie
      <input type="checkbox" value="checkbox 2"/>Peach Mango Pie
    </div>
    
    <div>
      <label class="one-line">Special order notes?</label>
      <textarea class="form-control"></textarea>
    </div>
    
    <input type="submit" id="submit" class="form-control"/>
  </form>
  </div>
</body>

【讨论】：

以上是关于如何在调查表后面添加半透明矩形背景？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

向上滚动时如何将一个div隐藏在另一个半透明的div后面

网页制作中，我使用滤镜，把背景颜色黑色半透明了，但它也把我黑色背景上的字体也给半透明了，求高手指...

设置 NavigationBar 半透明时出现错误

Unity Shaders and Effects Cookbook (D-1) 设置 ZTest 来实现遮挡半透效果

htmlcss和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

如何在相机ARKit上添加半透明背景