如何拥有正常的 <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%;
}

我看过其他 'possible' 解决方案，主要是使用两个 div，但这对我不起作用。什么是完成我想要做的事情的最佳方式？这是我的输出图像：

Answer 1

div.rightcontainer * {
opacity: 1;
}

星号应 select rightcontainer 的所有子元素并再次使它们不透明度为 1。

如果不是，那么您可以在每个子元素上手动将不透明度设置回 1.0。

Answer 2

我认为您可以去掉容器上的 opacity: 0.5，并使用 rgba() 背景属性和 0.5 作为 a 值。

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

Answer 3

使用背景颜色而不是不透明度：

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

Answer 4

使用这个：

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

如何拥有正常的 <h2> 和具有父级不透明度的输入字段？

How to have a normal <h2> and input fields with parent opacity?

html

css

opacity