html - 带背景颜色的 Bootstrap 全宽侧边栏

Question

我的布局如下 this image

问题？如何在左侧部分制作全 Angular 紫色背景？ 这是my code

HTML:

<section id="screens-eight" class="clearfix">
    <div class="container">
        <div class="row">
            <div class="col-md-6 screens-eight-left">
                <div class="screens-eight-bg"></div>
                <p>
                    Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo
                </p>
            </div>
        </div>
    </div>
</section>

CSS:

#screens-eight {
    background: blue; 
    padding-bottom: 180px;
}
.screens-eight-left {
    background: #835fa8; 
    position: relative; 
    z-index: 0; padding-bottom: 
    80px; padding-top: 80px;
}

@media(min-width: 992px) {
    .screens-eight-left .screens-eight-bg {
    background: #835fa8; 
    left: 0; position: 
    absolute; top: 0; 
    width: 50%; 
    z-index: -1;}
}

Answer 1

我在本地计算机上找到了解决方案。只需按照以下步骤操作即可。

HTML

<section id="screens-eight" class="clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-6 screens-eight-left">
                    <p>
                        Ut Enim ad minim veniam quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo
                    </p>
                </div>
            </div>
        </div>
    </section>

CSS

    #screens-eight {background: blue; padding-bottom: 180px;}
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;}

@media(min-width: 992px) {
    .screens-eight-left .screens-eight-bg {background: #835fa8; left: 0; position: absolute; top: 0; width: 50%; z-index: -1;}
}

** 现在在 Photoshop 中制作 1 个图像**

第 1 步:- 创建高度为 1PX、宽度为 3000PX 的新图像 步骤 2:- 用颜色代码 #835fa8 填充左侧部分的 50%。所以你左边 50% 的部分是这种颜色 #835fa8，右边 50% 的部分是空白(透明)。 第 3 步:- 现在将图像保存为 png 格式。

现在在此 ID="screens-8"中调用该 png 图像

所以你必须添加CSS

#screens-eight {
    background-image: url(line.png);
    background-position: center;
    background-repeat-y: repeat;
}

所以现在你更新的CSS将如下

#screens-eight {background: blue;
    background-image: url(line.png);
    background-position: center;
    background-repeat-y: repeat;
    padding-bottom: 180px;
}
.screens-eight-left {position: relative; z-index: 0; padding-bottom: 80px; padding-top: 80px;}

@media(min-width: 992px) {
    .screens-eight-left .screens-eight-bg {background: #835fa8; left: 0; position: absolute; top: 0; width: 50%; z-index: -1;}
}

我还上传了我创建的图像，以便您了解想法。