CSS不透明层麻烦[重复]答案

【问题标题】：CSS opacity layer trouble [duplicate]CSS不透明层麻烦[重复]
【发布时间】：2017-09-20 05:59:57
【问题描述】：

我希望背景的不透明度为 0.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

【问题讨论】：

尝试#background {background-color: rgba(237, 147, 0, .8);} 并删除opacity:0.8;

标签： html css

【解决方案1】：

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

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

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

希望这会有所帮助！

【讨论】：

没问题的人

【解决方案2】：

不要使用不透明度，而是将背景颜色更改为 RGBA 而不是十六进制。虽然不透明度使所有子元素都可以透视，但使用 RGBA 则不会。

【讨论】：

这不能回答问题。
实际上，这确实回答了这个问题。它只是没有批准的答案那么彻底。