如何替换预制网页模板中section区块的背景图片

参考显示效果 #

对应HTML代码 #

<section id="cta" class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-12 align-self-center">
                <h2>BLOGGER</h2>
            </div>
        </div>
    </div>
</section>

替换失败原因 #

你贴出的HTML代码里没有直接定义背景图，预制模板的这类区块样式都是写在独立CSS文件里的，只修改HTML结构自然无法替换成功。

具体操作步骤 #

• 定位对应样式
  找到模板目录下的CSS文件（一般命名为style.css或main.css，通常存放在css、assets/css文件夹中），搜索选择器#cta，就能找到这个区块的样式规则，其中控制背景图的代码结构大致如下：

  #cta.section {
    background-image: url("images/old-bg.jpg");
    background-position: center;
    background-size: cover;
    /* 其余背景配套属性不要随意删除修改，避免布局错乱 */
  }
  

• 选择以下任意一种方式替换即可
  • 方式1：修改原CSS文件
    把url()括号里的旧图片路径，换成你自己新背景图的路径即可。注意：CSS文件里的路径是相对于当前CSS文件的相对路径，不是相对于HTML文件的路径。比如你的新图new-bg.jpg放在CSS文件同级的images文件夹里，就写成url("images/new-bg.jpg")。
  • 方式2：添加内联样式（无需修改原CSS，优先级更高，适合新手）
    直接修改HTML里的section开标签，添加行内样式指定新背景图，修改后的标签如下：

    <section id="cta" class="section" style="background-image: url('新图片的相对路径');">
    

    注意：内联样式里的路径是相对于当前HTML页面的相对路径。

常见注意事项 #

• 不要写电脑本地的绝对路径（比如C:/Users/xxx/Desktop/bg.jpg），这类路径在页面上传到服务器后会直接失效
• 修改完成后按Ctrl+F5强制刷新页面，清除浏览器缓存，避免加载旧资源看不到修改效果
• 不要删除原有background-size: cover、background-position: center这类配套属性，否则会出现背景图不铺满、显示错位的问题

内容的提问来源于stack exchange，提问作者Robin Johnson