CSS Gradient 不适用于所有引导按钮类答案

【问题标题】：CSS Gradient not working on all bootstrap button classesCSS Gradient 不适用于所有引导按钮类
【发布时间】：2019-11-19 03:46:40
【问题描述】：

这是 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Assignment1_2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href= "css/assignment3.css">
  <!----I used indexing using class names from K-K1 in css stylesheet-->
</head>
<body>
       <div class="container" id="K2">
           <div class="row my-5 py-5 mx-2 px-2">
               <span class="d-xl-block w-100 mx-4 pt-5 pb-4 K1">
                    <div class="container pt-3 ml-3">
                        <div class="row pb-0 pt-5" >
                             <div class="col-md-3"> 
                                <button type="button" class="btn btn-info K">Buy Now</button>
                             </div>
                             <div class="col-md-9">
                                 <button type="button" class="btn btn-info K">Larger Button To Test that
                                        we did it correctly.
                                 </button>
                             </div>
                        </div>
                    </div>
               </span>
           </div> 
       </div>
</body>
</html>


````````````
this is CSS for that
```````````
#K2 .K{background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)); 
    border-radius: 60px; border-style: none}
#K2 .K1{
  margin: 10px;
  box-shadow: 0 5px 10px -2.5px;
  background-color: #a5aab1;
  border-radius: 14px
  }

This is the button style I am supposed to make

我的问题实际上是我想更改按钮颜色。并且想要像青色这样的颜色，它应该有从上到下的渐变。但是当我使用 btn-cyan 引导类时它不起作用。 This is where I found about btn-cyan class 我应该使用的确切颜色是“HTML代码：#0C8BCB RGB代码：R：12 G：139 B：203“。但是当我在CSS线性渐变标签中输入这些值时。它不起作用。我尝试删除那个btn-info标签并保留它。但它没有工作。请添加解释为什么它不起作用以及你的答案背后的逻辑，我为我的菜鸟道歉。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

根据您的要求，您需要添加 linear-gradient 属性以使您的 css 渐变工作。请看代码。根据您的要求，我使用了 #0C8BCB 颜色来增强按钮。

.btn-info{
background:linear-gradient(#71d5e2,#0C8BCB );

}

This is HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Assignment1_2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href= "css/assignment3.css">
  <!----I used indexing using class names from K-K1 in css stylesheet-->
</head>
<body>
       <div class="container" id="K2">
           <div class="row my-5 py-5 mx-2 px-2">
               <span class="d-xl-block w-100 mx-4 pt-5 pb-4 K1">
                    <div class="container pt-3 ml-3">
                        <div class="row pb-0 pt-5" >
                             <div class="col-md-3"> 
                                <button type="button" class="btn btn-info K">Buy Now</button>
                             </div>
                             <div class="col-md-9">
                                 <button type="button" class="btn btn-info K">Larger Button To Test that
                                        we did it correctly.
                                 </button>
                             </div>
                        </div>
                    </div>
               </span>
           </div> 
       </div>
</body>
</html>

希望这会有所帮助。

【讨论】：

【解决方案2】：

您应该从您的 CSS 中删除不需要的代码。并且 id 不允许展示你的风格.. 就这样尝试

css

.container button{
  background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)); 
    border-radius: 60px; 
    border-style: none;
    }
.container .K1{
  margin: 10px;
  box-shadow: 0 5px 10px -2.5px;
  background-color: #a5aab1;
  border-radius: 14px
  }

【讨论】：