Question

我无法更改按钮的颜色。该类是＆＃34; btn-default＆＃34;。当我将鼠标悬停在它上面时，我只能看到半按钮颜色。这是我的HTML代码：

  <div class="pageOne">
        <div class="block text-center">
            <h1  id="header_text1"> a Good Tree production </h1>
            <h2  id="header_text2">We Review What We Watch</h2>
        </div>
    <div class="btnList">
         <a class="btn btn-default" href = "#"> a Good Tree production</a>
         <a class="btn btn-default" href = "#"> About Us</a>
         <a class="btn btn-default" href = "#"> Contact Us</a>
         <a class="btn btn-default" href = "#"> Works</a>
    </div>
</div>

CSS：

#header_text2{
 font-family: 'Jura', sans-serif;
 color: white;
 font-weight: 400;
}

.btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
}

.pageOne{
background-image:url("./container2.jpg");
background-size:cover;
height:450px;
}

这是我的实时输出链接：

https://jsfiddle.net/VijayVj7/6k8y8ehL/1/

请有人帮我解决这个问题

Answer 1

只需添加

File

Answer 2

您可以将背景位置更改为：

.btn-default:focus, .btn-default:hover {
    background-color: #e0e0e0;
    background-position: 0 -50px;
}

或

.btn-default:focus, .btn-default:hover {
    background: #e0e0e0;
}

Answer 3

只需将此行添加到现有的css background-image: none !important;

即可

检查此工作代码段 -

.btn-default{
        background-color: black !important;
        color: #0D9E69;
        font-family: 'Barrio', cursive;
        border-radius: 0px;
        font-size: 20px !important;
        background-image: none !important;
    }

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
          </head>
          <body>
 <div class="pageOne">
        <div class="block text-center">
            <h1  id="header_text1"> a Good Tree production </h1>
            <h2  id="header_text2">We Review What We Watch</h2>
        </div>
    <div class="btnList">
         <a class="btn btn-default" href = "#"> a Good Tree production</a>
         <a class="btn btn-default" href = "#"> About Us</a>
         <a class="btn btn-default" href = "#"> Contact Us</a>
         <a class="btn btn-default" href = "#"> Works</a>
    </div>
</div>
  </body>
  </html>

尝试这应该有用 -

   .btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
    background-image: none !important;
}

Answer 4

您唯一需要做的是：

background-image: none;

Answer 5

您的问题的解决方案是添加background-image:none !important; 在你的CSS中的btn-default内部，所以它看起来像这样

    .btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
    background-image: none !important;
}

现在修改btn-default的问题是它将删除btn-default的设计目的。我建议您添加自己的背景颜色为黑色的类，并使用它而不是btn-default来避免对boostrap的一般更改。例如，在你的代码中，将ht代码中的btn-default更改为my-btn-default，并将其更改为css代码，以便代码看起来像这样

.my-btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
  background-image:none !important;
}

和html

  <div class="btnList">
     <a class="btn my-btn-default" href = "#"> a Good Tree production</a>
     <a class="btn my-btn-default" href = "#"> About Us</a>
     <a class="btn my-btn-default" href = "#"> Contact Us</a>
     <a class="btn my-btn-default" href = "#"> Works</a>
  </div>

以这种方式它不会破坏任何引导程序。

如何在css中更改btn-default的颜色

5 个答案: