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

问题描述：

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

下面是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%; 
}

图像存储在哪里与您的HTML和CSS文件有关？你的控制台中是否有404错误？ – Turnip

嗨！我没有看到任何404错误。这些图像与index.html文件位于相同的文件夹中。 – Shashank

答

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

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

同样，CSS屏幕ä TE在样式表是无效的，它应该是：

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

答

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

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

假设你的CSS文件在根目录下，你的代码应该是b è...

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

答

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

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

这告诉浏览器使用它来覆盖任何其他声明。

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

相关推荐