如何使用bootstrap包裝容器以具有背景漸變？

如何包裝類容器，以便我可以有100％的背景漸變？我不希望它適用於整個身體。只是對容器。如何使用bootstrap包裝容器以具有背景漸變？

來源

2014-04-21 runners3431

類添加到容器div元素對於如 <div class ="container wrapclr"> Some content here </div>

在CSS文件中包括 .wrapclr { background-gradient:your choice; }

來源

2014-04-21 19:26:08 prashanth

不知道你的意思是你想要的容器是在屏幕的100％或沒有，但假設如此，您需要將html和body設置爲100％高度，並在其中放置100％的高度容器，並將漸變添加到容器中，或者在其旁邊添加第二個類。

CSS

html, body { 
    height:100%; 
    margin:0px; 
} 

.container{ 
    height:100%; 
} 

.gradient { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0))); 
}

HTML

<html> 
    <body> 
    <div class="container gradient">Container with a gradient</div> 
...

這是在行動：Codepen

你也只是.gradient中的CSS直接添加到容器，但這樣一來，你可以通過向它添加.gradient類來爲任何元素添加漸變。

來源

2014-05-18 06:00:03

如何使用bootstrap包裝容器以具有背景漸變？

回答

相關問題