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

.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:1001;
}

更多的z-index更高，按钮悬停尝试此代码

Answer 2

如果你仔细看非常，你可以看到按钮实际上高于黑色部分。（根据屏幕质量和校准情况，您实际上可能无法看到它，但我很清楚。）

原因是你有一个透明的背景颜色（60％透明的黑色） - 这就是＆＃34;黑色＆＃34;按钮在白色背景前出现灰色，但在非常暗的背景前几乎看不见。

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

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

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

使用背景颜色：rgba（0,0,0,0.4）用于按钮并使背景变黑，因为按钮将变黑并且不显示

你可以添加边框或使用不同的背景颜色，如灰红色..etc

＆＃13;

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(30,30,30,0.4);
     border:none;
     z-index:10000;
     border:1px solid gray;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
 
}

.customWidth {
    width: 300px !important;
    height:30px;
    display:block
}

＆＃13;

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

＆＃13;

Answer 4

它没有出现在图像后面，它只在图像上，你的颜色组合使你看到像这样的按钮。但是，如果您检查在其他系统中上传的具有最大亮度的相同图像，您将看到我在这里说的内容。我想如果你能改变你的颜色组合，一切都会好的。

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

4 个答案: