html - 使背景图像透明而不影响 Jekyll 主题中的前景文本

Question

我是 HTML 和 CSS 的新手。我正在使用 this Jekyll boostrap landing theme构建静态响应式网站。我想为它更改背景图像并使其透明以突出显示前景文本。我知道有 similar questions已经问过，但是当我尝试将它们应用于我的代码库时它们不起作用。如果我能为主题所具有的 css 样式找到一个可行的解决方案，我将不胜感激。

主题自带的相关html&css代码如下

<div class="intro-header">        
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message">
                    <h1>{{ page.title }}</h1>
                    <br><h3>{{ page.subTitle }}</h3>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>

CSS代码是

.intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-size: cover;
}

@media (min-width: 200px) {
  .intro-header {
    background-image: url(/img/website_background_d5moc7_c_scale,w_200.jpg);
  }
}

/* more media queries for different widths */

@media (min-width: 1329px) {
  .intro-header {
    background-image: url(/img/website_background_d5moc7_c_scale,w_1329.jpg);
  }
}

@media (min-width: 1400px) {
  .intro-header {
    background-image: url(/img/website_background_d5moc7_c_scale,w_1400.jpg);
  }
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    .intro-divider {
        width: 100%;
    }
}

如何修改上面的代码，使背景透明，前景明亮？

谢谢!

Answer 1

在 CSS 中将背景图像设置为“无”。为了覆盖主题样式，使其更具体。不要直接编辑主题 CSS 文件，这是一种不好的做法。您必须在 CSS 文件中编写以下 CSS。

div.intro-header {
  background-image: none;
}