无法更改 HTML 中特定部分的背景图片

Question

我是 HTML 和 CSS 的新手。我最近从 bootstrap 下载了一个主题，我正在尝试更改 section/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 无效，应该是：

background-image: 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

Answer 2

你的第一个例子应该是...

style="background-image: url(parallax.jpg);"

假设您的 CSS 文件在根目录中，您的代码应该是...

background: url(parallax.jpg) no-repeat center center fixed;

Answer 3

您的背景可能在其他地方被覆盖了。要强制图像添加 !important 到样式。将 CSS 更改为...

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

这告诉浏览器在它之后可能出现的任何其他声明上使用它。

无法更改 HTML 中特定部分的背景图片

Unable to change background image for specific section in HTML

html

css

background-image

twitter-bootstrap