时间戳

首页 > 解决方案 > 如何给引导列背景图像？

html - 如何给引导列背景图像？

问题描述

我只是想知道如何在引导程序中为 col 提供背景图像，因此它只会出现在该列中而不是整个页面中。我正在尝试这样做，这样我就可以让我的导航栏保持透明，并且只有它下面的列有背景图案。

标签： htmlcsstwitter-bootstrap

解决方案

首先，您需要给 col 一个类名或 id，例如

<div class="col-xs-3 myImage">

您可以使用下面的示例将图像放置在容器本身中。在您的 css 中，您首先需要确保图像包含在列中，因此设置 max-width 参数。

.myImage{
display:block;
max-width:100%; // change this is you need it to be smaller
background-image:url('yourimagefoldername/imagefilename.jpg');
background-size: cover; // contain might suite you better
background-position:center; // this can be change to top, bottom or wherever
}

这几乎就是您需要做的所有事情。

推荐阅读