div左右的CSS瓷砖边框图像

问题描述

我对使用border image属性不陌生，我不确定这是否真的是我要实现的最佳方法。我想为一个看起来像这样的元素创建一个胶片卷轴样式的左右边框：

我正在Bootstrap中执行此操作，因此一种方法可能只是将表格设置为col-10，然后在左侧和右侧执行col-1，但是也许有更好的方法使用CSS。 / p>

我试图尝试使用border image属性，但是我是新手，所以并没有取得太大的成功。下面的代码是我到目前为止所拥有的：

system.invalidOperationException: A second operation started on this context before a prevIoUs operation completed. This is usually caused by different threads using the same instance of DbContext.

.mainheading {
    font-size: 130px;
    text-align: center;
    font-family: din-1451-lt-pro-engschrift,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin-top: 80px;
}

.teammateHeader {
    background-color: #5ba676;
}

.teammateHeader .mainheading {
    text-align: left;
    font-size: 100px;
    padding-left: 15px;
}

.filmBorder {
    border-image-source: url('https://mathstory.org/img/filmSlice.svg');
    border-image-width: 0 90;
    border-image-outset: 1;
    border-style: solid;
    border-image-repeat: repeat;
}

解决方法

您还可以使用padding （例如示例px-5类）和background / background-size：

可能的示例：

.mainHeading {
    font-size: 130px;
    text-align: center;
    font-family: din-1451-lt-pro-engschrift,sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    margin-top: 80px;
}

.teammateHeader {
    background-color: #5ba676;
}

.teammateHeader .mainHeading {
    text-align: left;
    font-size: 100px;
    padding-left: 15px;
}

.filmBorder {
    background: 
    url('https://mathstory.org/img/filmSlice.svg') 0 0 repeat-y,url('https://mathstory.org/img/filmSlice.svg') 100% 0 repeat-y
    #000;
    background-size:2rem auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://use.typekit.net/krg3ekk.css">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>  
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
  
<div class="container form filmBorder px-5">
    <div class="row">
        <div class="col-12 teammateHeader">
            <div class="row">
                <div class="col-lg-9 col-12">
                    <h1 class="mainHeading">Submission</h1>
                </div>
                <div class="col-lg-3 d-lg-block d-none">
                    <img src="https://mathstory.org/img/teammate.svg">    
                </div>
            </div>
        </div>
    </div>
 </div>