受图像不透明度影响的 div 元素不透明度答案

【问题标题】：div element opacity affected by image opacity受图像不透明度影响的 div 元素不透明度
【发布时间】：2020-07-23 22:53:38
【问题描述】：

我有一个前端项目，我有一个 square item over an image 。我的方格应该是全红的，但损失了opacity。这是正方形在我的页面中的样子，而不是完全红色：我的代码：

.html,.body{
    background-size: cover;
}

body{
    overflow-x: hidden;
    margin:0;
    background: rgba(0, 0, 0, 0.1);

}
.welcome-container{
    position: relative;
    top:0px;
    left: 0px;
    width:100%;
    height:550px;
    margin:0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    



}

.welcome-pic{
    position: relative;
}


.welcome-pic img{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
}

.ds-square{
    background-color:red;
    height: 50px;
    width:50px;
    position: absolute;
    top: 2px;
    left: 2%;
    opacity:1;

}

.welcome-pic img {
    width:100%;
    height:550px;
    opacity: 0.8;
}

.inside-pic{
    position:absolute;
    top:30%;
    left:50%;
    font-size: 60px;
    transform: translate(-50%, -50%);
}

.inside-pic h3{
    font-size:18px;
}

<div class = "welcome-container">
      <div class = "welcome-pic">
      //my square 
        <div class="ds-square">
        </div>
        <img src = "IMAGES/welcome_pic.jpg" alt="#">
        <div class = "inside-pic">
         
          FLY WITH  DS <br/> AIRLINES
          <h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3> 
        </div>
      </div>
    </div>

在方块上尝试opacity:1; 不会改变结果。感谢您对这项简单任务的帮助。提前谢谢你

【问题讨论】：

您的代码 sn-p 似乎不起作用
子不透明度不能推翻父不透明度。即使正方形有opacity: 1，如果它的任何父级具有不透明度
@Gershom 没有办法改变这个吗？
您需要确保正方形及其所有父节点都有opacity: 1
您还需要确保正方形没有被半透明元素覆盖 - 这会导致正方形看起来是半透明的，而实际上它被覆盖了

标签： html css opacity

【解决方案1】：

.html,.body{
    background-size: cover;
}

body{
    overflow-x: hidden;
    margin:0;
    background: rgba(0, 0, 0, 0.1);

}
.welcome-container{
    position: relative;
    top:0px;
    left: 0px;
    width:100%;
    height:550px;
    margin:0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    



}

.welcome-pic{
    position: relative;
}


.welcome-pic img{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
}

.ds-square{
    background-color:rgba(255,0,0,0.4);
    height: 50px;
    width:50px;
    position: absolute;
    top: 2px;
    left: 2%;
    opacity:1;

}

.welcome-pic img {
    width:100%;
    height:550px;
    opacity: 0.8;
}

.inside-pic{
    position:absolute;
    top:30%;
    left:50%;
    font-size: 60px;
    transform: translate(-50%, -50%);
}

.inside-pic h3{
    font-size:18px;
}

<div class = "welcome-container">
      <div class = "welcome-pic">
      //my square 
        <div class="ds-square">
        </div>
        <img src = "IMAGES/welcome_pic.jpg" alt="#">
        <div class = "inside-pic">
         
          FLY WITH  DS <br/> AIRLINES
          <h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3> 
        </div>
      </div>
    </div>

【讨论】：

它没有帮助。还是谢谢你