如何使用父不透明度获得正常的<h2>和输入字段？

Question

我正在尝试让父背景的不透明度为0.5，但其中的所有内容也都具有不透明度。这是我的HTML：

<div class="rightContainer">
    <div class="blah">
        <h2>SPEAK TO AN EQUITY BUILD<BR>FINANCE PROFESSIONAL</h2>
    </div>

    <div class="Registration">
    <form>

    <div class="form-group">
        <label for="exampleInputEmail1">Full Name</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Full Name" name="muverName">
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Phone Number</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Phone Number" name="muverPhone">
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" name="muverEmail">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Your Location</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Your Location" name="muverLocation">
        <small id="emailHelp" class="form-text text-muted">This is used to determine if you're located within a nearby operational area.</small>
     </div>

     <br>

     <button type="submit" class="btn btn-primary muveRegistrationButton">APPLY</button>
</form>
</div>

和相应的CSS：

.rightContainer {
    float: right;
    margin-right: 9%;
    border-radius: 8px;
    width: 45%;
    height: 70%;
    margin-left: 8%;
    opacity: 0.5;
    background-color:rgba(255,255,255,.4);
}

.rightContainer headerText {
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

.blah h2 {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #00ccff;
    font-size: 120%;
    margin-top: 3%;
    margin-left: 15%;
    margin-right: 15%;
}

我已经看到了其他'可能'的解决方案，主要是使用两个div，但这对我不起作用。什么是完成我想要做的最好的方法？这是我输出的图像：

Answer 1

我认为您可以摆脱容器上的opacity: 0.5并使用带有0.5 a值的rgba（）背景属性。

.rightContainer {
    ...
    background-color: rgba(255, 255, 255, .5);
}

Answer 2

div.rightcontainer * {
opacity: 1;
}

星号应选择右容器的所有子元素，并再次使它们成为不透明度。

如果没有，则可以在每个子元素上手动将不透明度设置回1.0。

Answer 3

使用背景颜色代替不透明度：

background-color:rgba(300,300,300,0.5);

Answer 4

使用此：

 background:rgba(255,255,255,0.5);