Question

如何包装类容器以便我可以拥有100％的背景渐变？我不希望它适用于整个身体。只是到容器。

Answer 1

向容器div元素添加一个类例如 <div class ="container wrapclr"> Some content here </div>

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

Answer 2

不确定您是否希望容器成为屏幕的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类来向任何元素添加渐变。

如何使用bootstrap包装容器以获得背景渐变？

2 个答案: