0

I want the background to have an opacity of .8 but not affect the other elements on top. How can I do this?

HTML

<div id="background">
<div id="foreground">
<div class="row">
  <div class="column">
    <div class="card">
      <img src="lee2.png" alt="Jane" style="width:200px; height:200px">
      <div class="container">
        <h2>Lee Hannigan</h2>
        <p class="title">CEO & Founder</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>lee@stokeddesigns.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>

  <div class="column">
    <div class="card">
      <img src="bosco2.png" alt="Mike" style="width:200px; height:200px;">
      <div class="container">
        <h2>Bosco</h2>
        <p class="title">Lead Developer</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>bosco@stokeddesigns.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <img src="cat2.png" alt="John" style="width:200px;height:200px;">
      <div class="container">
        <h2>Caitriona Lyons</h2>
        <p class="title">Designer</p>
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
        <p>cat@stokeddesigns.com</p>
        <p><button class="button">Contact</button></p>
      </div>
    </div>
  </div>
</div>
</div>
</div>

CSS

/* Three columns side by side */
.column {

    float: left;
    width: 25%;
    margin-bottom: 16px;
    margin-left:70px;

    padding: 0 8px;
    background-color: grey;



}
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);


}
.container {
    padding: 0 16px;
}
/* Clear floats */
.container::after, .row::after {
    content: "";
    clear: both;
    display: table;

    }
.title {
    color: #453A3A;

}
.button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;

}
.button:hover {
  background-color: #555;


}
#background{

    background-color: #ED9300;
    opacity:0.8;

    }
#foreground{

text-align: center;
margin-top: 100px;
padding: 50px;

}

This is what the page looks like now

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
Leeroy Hannigan
  • 11,409
  • 3
  • 14
  • 31

2 Answers2

0

Use rgba coloring for the orange stripe instead of opacity. So like this:

background-color: rgba(215, 130, 44, 0.8);

The 0.8 is the opacity wich can be between 0 and 1

Hope this helps!

C.Schubert
  • 2,034
  • 16
  • 20
-1

Instead of using the opacity, change the background-color to an RGBA instead of a hex. While opacity makes all child elements see through, using an RGBA does not.

hex
  • 1
  • 1