Question

我对HTML＆amp; 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

您的背景可能会在其他地方被覆盖。强制图像添加！对样式很重要。将CSS更改为此...

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

这告诉浏览器使用它而不是其后的任何其他声明。

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

3 个答案: