Div background opacity

how image background placement and css position affect background color opacity

by trentHarlem

HTML

<div class="container">

  <div class="crown">
    <p>
      ¡ACHTUNG!
    </p>
  </div>
  
    <div class="parallax"></div>

  <div class="scroll one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
  </div>

    <div class="parallax"></div>

  <div class="scroll two">
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

    <div class="parallax"></div>

  <div class="scroll three">
    <p>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris net dolore magna aliqua.</p>
  </div>

    <div class="parallax"></div>
    
</div>

CSS

body,
html {
  font: 38px system-ui;
  height: 100%;
  min-width: 400px;
  background: transparent;
}

.container {
  position: relative;
  height: 100%;
}

.crown {
  position: fixed;
  height: 200px;
  width: 100%;
  border-radius: 100% 100% 100px 100px;
  border: 1px solid #FFA500;
  background-color: #FFA50099;
  text-align: center;
  line-height: 99px;
}

.parallax {
  background-image: url(https://picsum.photos/400/400);
  height: 90%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.scroll {
  height: auto;
  padding: 10px;
  margin: 5px;
}

.one {
  position: absolute;
  background: #CD212A99;
  border: 1px solid #CD212A;
}

.two {
  position: absolute;
  background-color: #ddddddaa;
  border: 1px solid #dddddd;
}

.three {
  position: relative;
  background: #282D3C99;
  border: 1px solid #282D3C;
}