时间戳

首页 > 解决方案 > 如何将背景颜色居中以适合其 Div 内容

html - 如何将背景颜色居中以适合其 Div 内容

问题描述

下面是我正在创建的联系我们表单的代码，我给第二个 div 之一提供了contact-form带有背景的类名：rgba(0, 0, 0, 0.8)，但我希望背景颜色居中并适合另一个 div 的内容，而不是 100% 在屏幕上。

我曾尝试使用 margin-left:50px 和 margin-right:50px 但它只发生了一点变化，但并没有产生预期的结果。

codepen.io 链接

body {
  background: linear-gradient(rgb(0, 0, 150, 0.5),rgb(0, 0, 0, 0.5)),url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.contact-title h2 {
  font-size: 16px;
  margin: 50px;
}

 .contact-title {
   margin-top: 100px;
   color: #fff;
   text-transform: uppercase;
   transition: all 4s ease-in-out;
 }

 .contact-form {
   background: rgba(0, 0, 0, 0.8);
   margin-left: 50px;
   margin-right: 50px;
   border-radius: 5px;
   text-align: center;
   opacity: 0.5;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
 }

 form {
   margin-top: 50px;
   transition: all 4s ease-in-out;
 }

 .form-control {
   width: 50%;
   background: transparent;
   border: none;
   outline: none;
   border-bottom: 1px solid grey;
   color: #fff!important;
   font-size: 18px;
   margin-bottom: 16px;
 }

 input {
   height: 45px;
 }

 form .submit {
   background: #ff5722;
   border-color: transparent;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   height: 50px;
   margin-top: 20px;
 }

 form .submit:hover {
   background-color: #f44336;
   cursor: pointer;
 }

.contact-menu {
  background-color: black;
  margin: 8px 8px 8px 8px;
  opacity: 0.8;
  overflow: hidden;
  height: 50px;
}

.contact-menu a {
  color: #f2f2f2;
  margin: 0px 0 0 0;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
}

.contact-menu a:hover {
  background-color: #ddd;
  color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="UX-Compatible" content="ie=edge">
    <title>BENDEVI-Contact </title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <div class="contact-menu">
      <a href="index.html">Home</a>
      <a href="#">Foreign</a>
      <a href="#">AFrica</a>
      <a href="#">Unity</a>
    </div>

    <div class="contact-title">
      <h2>Contact Us</h2>
    </div>

     <div class="contact-form">

       <form id="contact-form" action="" method="post">
         <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>

         <input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>

         <input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>


         <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>

         <input type="submit" class="form-control submit" value="SEND MESSAGE">

       </form>
     </div>
  </body>
</html>

标签： htmlcss

解决方案

根据您的描述，您希望表单元素占屏幕的 50%，但外部 div 不会比表单本身更宽。

您需要以%削减表单宽度的数量为单位添加边距。在我的示例中为 25%。并让表单元素在表单内具有 100% 的宽度，因此它们占据了被截断的外部元素的整个宽度。通过使用%它，每个屏幕宽度都会产生所需的结果。（玩弄边距%以获得所需的结果）。

body {
  background: linear-gradient(rgb(0, 0, 150, 0.5), rgb(0, 0, 0, 0.5)), url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.contact-title h2 {
  font-size: 16px;
  margin: 50px;
}

.contact-title {
  margin-top: 100px;
  color: #fff;
  text-transform: uppercase;
  transition: all 4s ease-in-out;
}

.contact-form {
  background: rgba(0, 0, 0, 0.8);
  margin-left: 25%;
  margin-right: 25%;
  border-radius: 5px;
  text-align: center;
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}

form {
  margin-top: 50px;
  padding: 5%;
  transition: all 4s ease-in-out;
}

.form-control {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
  color: #fff !important;
  font-size: 18px;
  margin-bottom: 16px;
}

input {
  height: 45px;
}

form .submit {
  background: #ff5722;
  border-color: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 50px;
  margin-top: 20px;
}

form .submit:hover {
  background-color: #f44336;
  cursor: pointer;
}

.contact-menu {
  background-color: black;
  margin: 8px 8px 8px 8px;
  opacity: 0.8;
  overflow: hidden;
  height: 50px;
}

.contact-menu a {
  color: #f2f2f2;
  margin: 0px 0 0 0;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
}

.contact-menu a:hover {
  background-color: #ddd;
  color: #000;
}
<div class="contact-menu">
  <a href="index.html">Home</a>
  <a href="#">Foreign</a>
  <a href="#">AFrica</a>
  <a href="#">Unity</a>
</div>

<div class="contact-title">
  <h2>Contact Us</h2>
</div>

<div class="contact-form">

  <form id="contact-form" action="" method="post">
    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>

    <input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>

    <input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>


    <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>

    <input type="submit" class="form-control submit" value="SEND MESSAGE">

  </form>
</div>

推荐阅读