使用div和按钮的不透明度在Bootstrap中遇到问题

Question

我想使用不透明度的div并包含一个按钮。我无法弄清楚为什么按钮获得不透明以及div。但文字很好。我想按钮，没有透明度

CSS

.jumbotron { 
    background-image: url('../images/parkbanner.jpg'); 
    background-size: cover; 
    color: #000; 
    padding: 150px 25px; 
    font-family: Montserrat, sans-serif; 
} 
.container-fluid { 
    padding: 60px 50px; 
} 

.phone { 
    margin: 5px; 
    margin-left: 50px; 
    background-color: #ffffff; 
    opacity: 0.8; 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
    border-radius: 25px; 
    padding: 20px; 
    width: 300px; 
    height: 175px; 
} 
.phone p{ 
    font-weight: bold; 
    color: black; 
} 

HTML

<div class="jumbotron text-center"> 
<div class="row"> 
    <div class="col-md-4 text-center"></div>  
    <div class="col-md-4 col-center"> 
    <div class="phone"> 
     <p>Please Don't Wait Until<br /> It's Too Late </p> 
      <button type="button" class="btn btn-success btn-lg"> 
       <span class="glyphicon glyphicon-earphone"></span> 1-888-496-8059 
      </button> 
     </div> 
     </div> 
    <div class="col-md-4 text-center"> 

    </div> 
</div> 
</div> 

[

Answer 1

在.phone类中删除opacity并添加背景rgba那么你是好

background-color: rgba(255,255,255,.8); 

Answer 2

由于按钮包含在类手机。尝试从该类中删除它或将opacity：0属性明确地添加到按钮。

Answer 3

更改按钮的不透明度。

.phone buton{ 
 
    opacity: 1 
 
}