How to change opacity of child element without affecting background and parent element opacity

1

Hello everybody !

I’m totally new in coding, this is my very first time and I’m very excited !
I am struggling with this :

I would like to put my text with an opacity of 1 inside the box, without altering the transparency of the background but I can’t figure out how to
Also, I would like to center my submit button in the middle of the box and make it plain, no transparent

Could you give me a hint ?

As well, tell me what you think about my code, it’s my first time and I’d like to improve, and I pretty much love it actually !!

My code:

CSS :

@import url('https://fonts.googleapis.com/css2?family=Tienne:wght@900&family=Yantramanav:wght@900&display=swap');

body{
  background: linear-gradient(rgba(155,155,155,.5), rgba(155,155,155,.5)), url(https://viajes.nationalgeographic.com.es/medio/2018/05/18/golden-gate-san-francisco_d2a5ff9e.jpg);
 font-family: 'tienne', arial;
 color: white;
}

label{
  opacity:1 important!;
}

#header{
  text-align: center;
}
#title{
  font-size: 70px;
  line-height: 52px;
}
#description{
  font-size: 20px;
  line-height: 1px;
}
#box{
  width: auto;
  height: 860px;
  border: 5px solid gray;
  margin-left: 400px;
  margin-right:400px;
  background: white;
  opacity: 0.6;
  border-radius: 10px;
  }
.form{
  color: gray;
  padding: 15px;
  opacity:1 important!;
}
.form-field{
  display: block;
  width: 100%;
  height: 30px;
  padding: 1px;
  color: white;
  background-color: gray;
  border-radius: 10px;
  font-size: 20px;
  margin-right:200px;
}

.form-field-age{
  display: block;
  width: auto;
  height: 30px;
  padding: 1px;
  color: white;
  background-color: gray;
  border-radius: 10px;
  margin-right: 550px;
  font-size: 20px;
}
.radio{
  display: inline-block;
  padding-left: 15px;
  text-indent: -15px;
}
.checkbox {
  display: inline-block;
  padding-left: 15px;
  text-indent: -15px;
  
}
.submit{
  color:white;
  background-color: gray;
  border-radius: 10px;
  height: 30px;
  width: 150px;
  font-size: 25px;
  text-align: center;
  margin:0 auto;

HTML:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<header id="header">
  <h1 id="title"> Get in touch !</h1>
  <p id="description">Let's get to know each-other</p>
</header>
<section id="box">
  
<form id="survey-form">
 <div class="form">
      <label id="name-label" for="name"> First Name</label>
      <input
        type="text"
        name="name"
        id="name"
        class="form-field"
        placeholder="Enter your first name"
        required
      />
    </div>
   <div class="form">
     <label id="name-label" for="name">Last Name</label>
      <input
        type="text"
        name="name"
        id="name"
        class="form-field"
        placeholder="Enter your last name"
        required
      />
    </div>
  </div>
   <div class="form">
   <label id="number-label" for="number"
        >Age</label>
      <input
        type="number"
        name="age"
        id="number"
        min="18"
        max="99"
        class="form-field-age"
        placeholder="Age"
        required
      />
  </div>
   <div class="form">
      <label id="email-label" for="email">Email</label>
      <input
        type="email"
        name="email"
        id="email"
        class="form-field"
        placeholder="Enter your Email"
        required
      />
    </div>
  <div class="form">
      <p>Where are you from ?</p>
      <select id="dropdown" name="country" class="form-field" required>
        <option disabled selected value>Select country </option>
        <option value="fr">France</option>
        <option value="mx">Mexico</option>
        <option value="uk">UK</option>
        <option value="us">USA</option>
        <option value="other">Other</option>
      </select>
    </div>
  
     <div class="form">
      <p>Are you ?</p>
      <label>
        <input
          name="gender"
          value="men"
          type="radio"
          class="radio"
          checked
        />Men</label
      >
         <label>
        <input
          name="gender"
          value="women"
          type="radio"
          class="radio"
        />Women</label
      >

      <label
        ><input
          name="gender"
          value="other"
          type="radio"
          class="radio"
        />Other</label
      >
    </div>
  <div class="form">
      <p>How do you feel ?</p>

      <label
        ><input
          name="feeling"
          value="good"
          type="checkbox"
          class="checkbox"
        />Good</label
      >
      <label>
        <input
          name="feeling"
          value="Soso"
          type="checkbox"
          class="checkbox"
        />So so</label
      >
      <label
        ><input
          name="feeling"
          value="Amazing"
          type="checkbox"
          class="checkbox"
        />Amazing</label
      >
      <label
        ><input
          name="feeling"
          value="bad"
          type="checkbox"
          class="checkbox"
        />Bad</label>
    </div>
    <div class="form">
      <p>Tell us more about you !</p>
      <textarea
        id="comments"
        class="form-field"
        name="comment"
        placeholder="Enter your comment here..."
      ></textarea>
    </div>
  <div class="form">
      <button type="submit" id="submit" class="submit">
        Submit
      </button>
    </div>
    </form>
</section>

Link to my project : https://codepen.io/Nalid/pen/qBOZava

Thanks a lot !!!

2

If the text lives in the box, then the opacity fo the text will be the same as the box.

You could make sure they’re in two separate boxes and then slide the one with text over the one that should be translucent.

box to contain both
box to to be translucent
box with text. ( position this one of the one above it )

3

Thanks hirodashi !

So in total 3 boxes right ?

something like that :

<div id="box-parent">
<div id="box-background">
<div id="box-text"> 
</div>
   </div>
       </div>

css:

#box-background{
width: auto;
  height: 860px;
  border: 5px solid gray;
  margin-left: 400px;
  margin-right:400px;
  background: white;
  opacity: 0.6;
  border-radius: 10px;
  }
#box-text{

}

?

Thanks a lot for your help