爲什麼按鈕出現在我背景的一半後面？

當元件，如按鈕或文本是在背景上的暗側，它們出現它的後面。

當元素在燈光一側時，它出現在背景前面。

我怎樣才能讓元素出現在背景的黑暗面？

下面是按鈕的代碼，位於主體標籤（其我的背景位於）以外

<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

爲什麼按鈕出現在我背景的一半後面？

回答

相關問題