更改 bootstrap 网站中的部分背景颜色

Question

在像 www.teachyourselfpython.com 这样的 bootstrap 网站中，欢迎和资源部分（如果您向下滚动）是白色的。即背景色为白色。

我尝试了各种方法，但我不清楚将代码放在哪里或放什么，将每个部分的白色背景（但不影响其余部分）更改为浅灰色。

例如，页面上的 'Our resources' 部分是黑色的，但我看不到将其变为黑色的代码。

<!-- About Section -->
    <section id="about">
        <div class="container">

            <div class="row">
                <p></br></br></br></p>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Our Resources</h2>
                    <h3 class="section-subheading text-muted">A Better way to learn Python.<h3>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
                    <p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
                    <p></br></br></br></p>
                    <a href="signup.php" class="btn-block" style="text-align:center;">Sign Up Today!</a>
                </div>
                <div class="col-md-6" style="text-align:center;">
                    <div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
                </div>
            </div>
            <div class = "row">
                <p></br></p>
            </div>
        </div>
    </section>

任何人都可以建议最好的方法来进行非常简单的调整（只需对主索引页面进行调整）以将背景光的白色部分变为灰色

源码：www.teachyourselfpython.com可以用来做demo（在哪插什么）

我试过在每个部分下添加这个

<!-- About Section -->
    <section id="about">
        <div class="container"  style="background-color: #ce0818;opacity:0.8;">

但这会变成方块 'red'（或任何颜色）而不是网站的整个宽度，这就是问题所在。

Answer 1

在我们资源的上下文中 - 您应该将背景 css 放到 div 部分而不是容器 div

<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">

并将背景更改为浅灰色将其写在标签中，如

<body style="background:#cccccc !important;">

这是一种不太受欢迎的内联方法。您可以使用外部 css 并将您的 css 写在那里并将该文件包含在页面

中

要使用外部样式 sheet，请在 HTML 页面部分向其添加 link：示例：

<link rel="stylesheet" href="styles.css">

然后写

body{
background:#cccccc;
}

#about{
   background: #24242a;
   padding: 60px 0;
  text-align: center;
  }

或者可以在该页面中的 head 标记示例中包含 css 代码：

    <head>

     <style>
          //write your style code here
     </style>

   </head>

自学将 css 写入 css/main。css 文件

更改 bootstrap 网站中的部分背景颜色

change section background colour in bootstrap website

background

colors

sections

bootstrap-4