Question

我希望背景的不透明度为.8，但不会影响顶部的其他元素。我怎么能这样做？

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

Answer 1

对橙色条纹使用rgba着色而不是不透明度。像这样：

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

0.8是不透明度，可以在0和1之间

希望这有帮助！

Answer 2

不使用不透明度，而是将背景颜色更改为RGBA而不是十六进制。虽然不透明度使所有子元素都能看透，但使用RGBA却没有。

CSS不透明层问题

2 个答案: