背景色灰色，而不是透明

Question

因此，当我尝试删除背景颜色属性时，背景保持灰色，而不是变得透明。法典：

.CSS：

    #contact-form button[type="submit"] {
    position: absolute;
    width: 100%;
    margin: 100px 0 5px;
    padding: 10px;
    font-size: 15px;
    height: 50px;
    max-width: 372px;
    border: 1px solid white;
    border-radius: 15px;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}
#contact-form button[type="submit"]:hover {
    background-color: #fff;
    color: #2D2D2D;
}

Answer 1

尝试使用background:transparent;而不是background:#fff;因为这会将背景的颜色更改为"白色"，它不会使背景透明，可能会有所帮助。正如@blackandorangecat所说，可能还有其他冲突的CSS可用，请浏览您的代码并尝试将其删除。

有关后台 CSS 属性，请参阅 https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-color&preval=transparent

Answer 2

如果你想让按钮隐藏直到鼠标悬停，只需将background:transparent;添加到第一个 CSS 规则中。我添加了表单背景以明确它是如何工作的。

#contact-form button[type="submit"] {
  position: absolute;
  width: 100%;
  margin: 100px 0 5px;
  padding: 10px;
  font-size: 15px;
  height: 50px;
  max-width: 372px;
  border: 1px solid white;
  border-radius: 15px;
  color: white;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: 0.5s;
  background: transparent; /* This is all that was needed */
}
#contact-form button[type="submit"]:hover {
  background-color: #fff;
  color: #2D2D2D;
}
form {
  background-color: red;
  height: 200px;
}

<form id="contact-form">
  <button type="submit" value="Submit">Click Me!</button>
</form>