使用css漸變背景修復底部條紋

我正在嘗試將底部條放到屏幕底部。我有一段CSS代碼爲我創建了一個欄。但我一直無法將酒吧固定在底部。使用css漸變背景修復底部條紋

CSS

.top_bar 
{ 
    display:block; 
    height:18px; 
    margin-bottom:10px; 
    margin-top:10px; 

    background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%); 
    background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%); 
    background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%); 
    background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%); 
    background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%); 

    background-image: -webkit-gradient(
     linear, 
     left bottom, 
     right 0, 
     color-stop(0.15, rgb(135,30,51)), 
     color-stop(0.58, rgb(90,115,183)), 
     color-stop(0.79, rgb(90,116,183)) 
    ); 
}

我怎樣才能解決這個問題的底部？

我已經嘗試了下面的代碼，但我沒有工作。它固定欄底部，但漸變條收縮...

position: fixed; 
bottom: 30px;

來源

2013-10-06 Arif YILMAZ

就這3個添加到您的規則，固定定位需要的元素的寬度要提到的，因爲它是絕對定位只是一種特殊形式：

position: fixed; 
width: 100%; 
bottom: 30px;

Fiddle

來源

2013-10-06 18:56:55 PSL

嗨，似乎工作，但有一個問題。左側有空格，右側沒有空格。我該如何解決這個問題？ –

@ayilmaz是否這樣？ http://jsfiddle.net/4T2fd/ – PSL

非常感謝。有用 –

http://jsfiddle.net/Y7UKv/1/

當位置類型不再改變它具有100％的寬度。你將需要添加

left: 0; 
right: 0;

或

width:100%;

來源

2013-10-06 18:56:00

如果元件被定位使用absolute或fixed，元素的寬度將不會自動增長到100％。如果您希望寬度爲100％，則需要手動設置。

代碼：

.top_bar { 
    position: fixed; 
    bottom: 30px; 
    display:block; 
    height:18px; 
    width: 100%; //Manually set width to 100% 
    margin-bottom:10px; 
    margin-top:10px; 

    //Gradient stuff 
}

例子：http://codepen.io/skimberk1/pen/4eca8e6d6f9b899458cfa4ccfea38877

來源

2013-10-06 18:57:49 skimberk1

使用css漸變背景修復底部條紋

回答

相關問題