gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 16:08:37 26 4
gpt4 key购买 nike

我有这样的布局 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;}
}

最佳答案

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

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-eight"中调用那个 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;}
}

我还上传了我创建的图像,以便您了解这个想法。 enter image description here

关于html - Bootstrap 带背景色的全宽侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36168778/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com