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

当元件，如按钮或文本是在背景上的暗侧，它们出现它的后面。

当元素在灯光一侧时，它出现在背景前面。

我怎样才能让元素出现在背景的黑暗面？

下面是按钮的代码，位于主体标签（其我的背景位于）以外

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

来源

2017-05-18 OMcGraw

您应该发布创建背景元素的代码以及此按钮代码 - 因为它当前位于您的HTML中。你可能根本不需要'z-index'，但是我们需要看到具有背景的代码，以便知道为什么按钮超过了一个，而在另一个之下。 –

我添加了背景的代码。它在我的html页面的标记中被调用。谢谢:) – OMcGraw

谢谢，但你应该给我们工作的HTML/CSS我们可以点击，所以我们不必猜测，并尝试重建您的布局。如果你在提问时这么做，你会得到更多的帮助。这就是说，这是你有什么？该按钮不重叠https://codepen.io/anon/pen/oWajgo –

紧密地，你可以看到按钮实际上是也是黑色部分以上的。（根据您的屏幕质量和校准，您可能实际上看不到它，但我很清楚。）

原因是您有一个透明的背景颜色定义（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>

来源

2017-05-18 16:27:46 Christoph

非常感谢您的回答，它非常完美。 :) – OMcGraw

.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的是海格更多的按钮是如果你看非常悬停试试这个代码

来源

2017-05-18 16:22:12 Lafa

我试过这段代码，它仍然没有改变任何东西。我不确定它是否是“z-index”，因为背景的白色和黑色部分是相同的图像。所以如果这是一个“z-索引”问题，那么按钮就会落后于一切。不只是黑暗的一部分。感谢您的回复！ – OMcGraw

你能寄给我一个密码吗？或小提琴？ – Lafa

用背景色：RGBA（0,0,0,0.4）的按钮，并在事业的背景上的黑色按钮为黑色，并没有出现

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

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

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

来源

2017-05-18 16:43:27 Jala

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

来源

2017-05-18 17:09:01

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

回答

相关问题