如何为 bootstrap 创建边框图像

Question

如何在 bootstrap .container class 的左侧和右侧创建边框图像，然后垂直重复图像？

容器有一个 background-color 并且页面上仍然有几个容器实例。

事实上，我想在主容器位置的左侧和右侧都有一个边框图像。

.container {
    border-image: url("../tasavir/ghaleb/paein-header.jpg");
    border-repeat: repeat-y;
    border-position: right;
}

此代码无效。

我的主题图片在那里：the website image

Answer 1

这是您正在寻找的工作示例：

Bootply Example Here

CSS

.container {

background-color:blue;
height:400px;
border-image: url('...images/your_image');
border-image-width: 0 60px 0 60px;
border-image-slice: 0 400px 0 400px;
border-image-repeat:repeat;

}

您需要更改 border-image-width 和 border-image-repeat 以适应您希望使用的特定图像。

Answer 2

坦克先生。但最好的方法是：

.container {
    border-style: solid;
    border-width: 0px 13px;
    border-image: url('../path/to/pic.jpg') 0 13 stretch repeat;
    border-image-outset: 13px;
}

如何为 bootstrap 创建边框图像

how can create border image for bootstrap

css

twitter-bootstrap

twitter-bootstrap-3