html - 为什么按钮出现在我一半背景的后面？

Question

我有以下一半灰色和一半白色的背景图像。

当按钮或文本等元素位于背景的黑暗面时，它们会出现在背景的后面。

当元素位于浅色侧时，它会出现在背景前面。

如何让元素出现在背景的黑暗面之前？

这是按钮代码，位于 body 标签之外(我的背景位于其中)

<div class="container">
   <div class="row">
      <div class="col-xs-12" align="center">
         <a href="Reporting.php" class="btn btn-dark btn-lg customWidth">Go</a>
      </div>
   </div>
</div>

这是按钮的 CSS。

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
    z-index:1000;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

.customWidth {
    width: 100px !important;
    z-index:1000;
}

这是我的背景代码:

.background-picture {
    background-image: url("../img/background.png");
    background-size: cover;
    z-index:1;
}

Answer 1

如果您非常仔细观察，您会发现该按钮实际上也在黑色部分之上。 (根据屏幕质量及其校准，您实际上可能看不到它，但我很清楚。)

原因是您定义了透明背景颜色(60% 透明的黑色)——这就是为什么“黑色”按钮在白色背景前显示为灰色，但在非常暗的背景前几乎看不见的原因.

只需将其更改为不透明的灰色即可。

.btn-dark {
   /* background-color: rgba(0,0,0,0.4); */
   /* about the same color: */
   background-color: #999;
}

此外，您绝对应该将深色背景按钮的字体颜色更改为白色或非常浅的灰色。

main{position:relative;display:inline-block;border:1px solid red;}main > div{width:200px;height:150px; display:inline-block;}.white{background:#fff;}.black{ background:#000;}button{position:absolute;left:calc(50% - 50px);width:100px;border:none;color:#fff;border:1px solid #ccc;}

#one{
  background:#999;
  top:10px;
}
#two{
  background:rgba(0,0,0,.4);
  top:60px;
}

<main>
<div class="white"></div><div class="black"></div>
<button id="two">
Test with rgba color!
</button>
<button id="one">
Test with opaque color!
</button>
</main>