Bootstrap - 用背景顏色jumbotron重複圖案疊加

我試圖在我的jumbotron的rebecca-purple背景顏色上獲得重複背景圖像。我知道我做錯了什麼，只是不知道它是什麼。這裏的代碼：Bootstrap - 用背景顏色jumbotron重複圖案疊加

.jumbotron { 
background-color: rebeccapurple; 
color: white; 
width: auto; 
height: 350px; 
margin-bottom: 100px; 
position: relative; 
display: block; 
font-family: FontAwesome; 
} 

.jumbotron::after { 
content: ''; 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
background: url(\images\bg_images\maze_white.png) repeat center center; 
z-index: -1; 
}

所有幫助表示讚賞。謝謝。

來源

2017-04-05 n0de

問題是什麼？ – Swellar

你的迷宮不應該超過紫色嗎？ z-index：-1將其放在下面。可能你想要你的：有了紫色背景之後，還有大膽的迷宮。 – DrunkWolf

@Tesseract - 問題不起作用。我嘗試在下面的解決方案周圍交換bg-s，但無濟於事。只要得到一個沒有寫上任何東西的紫色電子槍。 – n0de

由於z-index：-1，你的迷宮位於jumbotron後面。你需要做的是換了背景身邊，想在這個小提琴http://jsbin.com/tekefobive/edit?css,output

.jumbotron { 
background-image:url('pattern'); 
... 
} 
.jumbotron:after{ 
background:purple; 
z-index:-1; 
... 
}

來源

2017-04-05 05:08:57 DrunkWolf

謝謝！我嘗試過，但現在整個jumbotron只是紫色，沒有文字。 – n0de

@ n0de在小提琴中你看到你可以添加文字沒問題，只看這個：http://jsbin.com/yigejisohu/1/edit?html,css,output – DrunkWolf

它的工作！非常感謝您的幫助。 – n0de

// Try This 
.jumbotron { 
background: url("IMAGE PATH") rebeccapurple repeat center center; 
color: white; 
width: auto; 
height: 350px; 
margin-bottom: 100px; 
position: relative; 
display: block; 
font-family: FontAwesome; 

}

來源

2017-04-05 05:20:17

謝謝。我試過這個，但仍然沒有工作。它具有除背景圖案之外的所有內容。 – n0de

雖然這個代碼片段是受歡迎的，並且可以提供一些幫助，但它會[如果包括解釋]（/ meta.stackexchange.com/q/114762）*如何*和*爲什麼*會大大改進問題。請記住，你正在爲將來的讀者回答這個問題，而不僅僅是現在問的人！請編輯您的答案以添加解釋，並指出適用的限制和假設。 –

Bootstrap - 用背景顏色jumbotron重複圖案疊加

回答

相關問題