Question

我正在尝试获取彩色背景，以超出容器的范围。我正在使用引导程序，元素本身嵌套在该部分的内部。香港专业教育学院试图使用：before伪元素，但我做错了或不起作用。

有没有办法扩展此文本区域的蓝色以延伸到整个窗口的长度？

https://codepen.io/Tsukiyono/pen/jQQexa?editors=1100

body {
    background-color: black;
}

.services_text {
  max-width: 45rem;
  padding: 0 1rem;
}

#service-icons {
  background-color: #fff;
  padding-top: 5rem;
}


.card {
  border: none;
  text-align: center;
  max-width: 150px;
  min-width: 150px;
  height: auto;
  color: black;
}

.img-card-top {
  background-color: black;
  height: 100px;
  width: 100px;
}

.services-text {
  background-color: #fff;
  margin-top: 3rem;
}

.services_list {
  list-style: none;
  font-size: 1.25rem;
  color: black;
}

#service-icons .container {
  width: 100%;
}

.service_lead-container {
  background-color: rgb(51, 204, 204);
  margin: 0;
}

.service_lead-container:before {
  content: "";
  background-color: rgb(51, 204, 204);
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 200px;
}

.service_points-container {
  background-color: #fff;
}

<head>
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
</head>

<section class="section" id="service-icons">
        <div class="container p-0">
            <div class="row custom-row">
                
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Strategic Marketing and Development</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg d-flex align-items-stretch">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Branding and Identity</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Creative Direction</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Content Strategy</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Content Development</h5>
                        </div>
                    </div>
                </div>
        
        
            </div> <!-- End Row 1 Icons-->
        
        
            <div class="row custom-row">
        
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Editorial Strategy</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Print</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Writing</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Editing</h5>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg">
                    <div class="card mx-auto">
                        <div class="img-card-top"></div>
                        <div class="body">
                            <h5 class="card-title">Graphic Design</h5>
                        </div>
                    </div>
                </div>
            </div> <!-- End Row 2 Icons -->
        
            <div class="services-text d-flex justify-content-center align-items-center pt-3 container-fluid">
                <div class="row">
                    <div class="col-lg-7 col-12 d-flex justify-content-center align-items-center service_lead-container">
                        <p class="lead p-3 services_sales_text">Fortunately, we have developed relationships and partnerships with industry leaders in a variety of other disciplines with whom we will happily liaise on your behalf including: </p>
                    </div>
                    <div class="col-lg-5 col-12 text-center service_points-container">
                        <ul class="services_list p-3">
                            <li>Public Relations</li>
                            <li>Media Placement</li>
                            <li>Digital Experience</li>
                            <li>Website Development</li>
                            <li>Video and Commercial Production</li>
                            <li>SEO</li>
                            <li>SEM</li>
                        </ul>
                    </div>
                </div>
            </div>
        
        </div>
    </section>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 1

#container {
    width: 100px;
    margin: 0 auto;
    background-color: #FFFFCC;
}
.stripe {
    background-color:#CCFFFF;
    height: 100px;
    position: relative;
}
.stripe:before {
    content:"";
    background-color:#CCFFFF;
    position: absolute;
    height: 100%;
    width: 4000px;
    left: -2000px;
    z-index: -1;
}

<div id="container">
  <div>one</div>
  <div class="stripe">two</div>
  <div>three</div>
</div>

尝试作为参考

将颜色背景扩展到容器外部

1 个答案: