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规则即可。我添加了表单背景，以明确它是如何工作的。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

背景 - 颜色灰色，而不是透明

2 个答案: