如何从按钮中删除背景[重复]

Question

我有一个基本按钮，您可以在其中单击它并显示一个模式，但我无法使按钮透明，因此它没有背景，而只有文本可见。

我在这里和谷歌上搜索过，包括 w3 school 的解决方案，但我没有成功

HTML：

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Button</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close"></span>
    </div>
    <div class="modal-body">
      <p>Subscribe to the Galaxy Mailing List</p>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.</p>
        <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>

CSS

button.subscribe{
    background:none;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.modal-body {
    padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

截图： https://imgur.com/6MMxjLy

任何帮助都非常感谢并提前感谢。

Answer 1

通常，HTML 按钮具有默认样式。但是您可以使用 CSS 更改按钮的外观。

.b1 {
    border: none;
    background: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

<button class="b1">I'm a button</button>

Answer 2

button { background: unset !important;
border: unset !important;
outline: unset !important; }

Answer 3

button.subscribe {
    background:none;
    border:none;
}

Answer 4

刚显示边框，加border:none;

button.subscribe{
    background:none;
    border:none;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #000;
  color: white;
}

.modal-body {
    padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

<!-- Trigger/Open The Modal -->
<button class="subscribe" id="subscribe">Button</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close"></span>
    </div>
    <div class="modal-body">
      <p>Subscribe to the Galaxy Mailing List</p>
      <p>Welcome to the Galaxy Games Subscription Management page. Galaxy mailing lists are the best way to get the early word on all our game announcements, official launches, contests, special events, and more. Make sure you're enlisted to receive all
        the updates.</p>
        <a href="https://socialclub.galaxy-games.co.uk/settings/email" class="manage" target="_blank" click="closeSection()" data-gtm-category="Footer" data-gtm-action="Social Club" data-gtm-label="Manage Subscription Account">Manage Your Account</a>
    </div>
  </div>

</div>

Answer 5

你应该设置按钮的背景颜色透明

    button.subscribe {background-color: transparent;border: none; outline: none;}