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;
}

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

1 个答案: