html - 无法更改 HTML 中特定部分的背景图像

Question

我对 HTML 和 CSS 还很陌生。我最近从 bootstrap 下载了一个主题，我正在尝试更改一个部分/div 的背景图像。我不仅尝试向 CSS 添加代码，而且还在我的 html 代码中包含了背景图像引用。但是我仍然无法更改背景。图像是 .jpg。

这是特定部分的 HTML 代码:

<!-- About Section -->
<section class="success" id="about" style="background-image:parallax.jpg;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h1>About</h1>
               <!-- <img class="img-responsive" src="new.gif" alt="" align="middle" align ="center" style="margin-left:auto; margin-right:auto"> -->
                <br>
            </div>
        </div>
        <div>
            <div>
                <p align="left" style="font-family: 'Abel', sans-serif;" > Hello.</p>
            </div>
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <a href="Website Resume.pdf" class="btn  btn-outline" style="font-family:'Shadows Into Light', cursive;">
                    <i style="font-family:'Shadows Into Light', cursive; text-align: center;"></i> Check Out My Resume!
                </a>
            </div>
        </div>
    </div>
</section>

这是 CSS 代码:

section.success {
    color: #000000;
    background: #ffffff;
}

#about{
    background-image: url("parallax.jpg") no-repeat center center fixed;
    background-size: cover;
    height: 300%;
    width: 100%;
}

Answer 1

请注意，您在 HTML 中编写的内联 CSS 无效，它应该是:

背景图片:url("parallax.jpg");

此外，您在样式表中编写的 CSS 无效，它应该是:

background-image: url("parallax.jpg") !important;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

或者

background: transparent url("parallax.jpg") no-repeat fixed center center !important;
background-size: cover;

引用:https://developer.mozilla.org/en-US/docs/Web/CSS/background-image