Question

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

容器有一个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创建边框图像

2 个答案: