html - Bootstrap 中存在 div 和按钮的不透明度问题

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);