如何更改 HTML 中的背景图像答案

【问题标题】：How to change backround image in HTML如何更改 HTML 中的背景图像
【发布时间】：2021-02-10 17:08:40
【问题描述】：

我不确定这个网站是否已经问过这个问题，但这是我在为自己的个人博客业务编写网站时遇到的问题。

<div 
  class="col-12 col-lg-6 cover-background md-height-500px sm-height-350px wow fadeInLeft" 
  style="background-image:url('http://placehold.it/960x668');">
    <div class="h-sm-400px"></div>
</div>

上面写着style="background-image:URL('web URL')" 如何将源更改为我桌面上的本地文件而不是网络上的图像？

【问题讨论】：

您只需在项目结构中包含文件的路径，如url("/some-dir/some-file.jpeg")，就像任何其他 URL 一样。
这能回答你的问题吗？ How to give the background-image path in CSS?
“我不确定这个网站上是否已经问过这个问题”为什么不先搜索再问？
你不能在公共网站上使用本地文件
@SethB 为什么不呢？在“公共网站”上托管时，“本地”文件变成“公共”文件。但是你仍然可以使用本地文件吗？

标签： javascript html css

【解决方案1】：

如果可以，请将其上传到您的服务器并执行

<div 
  class="col-12 col-lg-6 cover-background md-height-500px sm-height-350px wow fadeInLeft" 
  style="background-image:url('./path/to/image');">
    <div class="h-sm-400px"></div>
</div>

如果for some reason you can't，您可以将其上传到某个图片托管站点（如imgur），或者您可以将您的图片上传到一个图片到data-uri站点（如this one）并放置数据URI。

【讨论】：

我不是反对者，但我可能会告诉你为什么有人会反对。您的回答更适合作为评论，因为其他人已经表示调整 url() 可以解决问题。
@TannerDolby：我认为调整url() 没有任何问题，因为它似乎可以回答这个问题。此外，对于此类问题，所有答案都可以像 cmets 一样短。好吧，我想有些人可能对它的工作原理了解更多。
我已经在第一条评论中发布了您的回答基本上重复的内容。这是否更清楚地说明了您被否决的原因？其他人也包括供 OP 回答他自己的问题的资源。
@TannerDolby：哦，所以我在重复其他人所说的话。谢谢你的解释！

【解决方案2】：

您将不得不在线（而非本地）上传图片，然后只需将 URL 更改为新图片即可。

例如：

我有一张图片 puppy.jpg 我想要在我的博客上。

我上传到ImgBB。

现在我将它添加到我的 CSS 中：

<div class="col-12 col-lg-6 cover-background md-height-500px sm-height-350px wow fadeInLeft" style="background-image:url('https://imgbb.com/MY-IMAGE');">
  <div class="h-sm-400px"></div>
</div>

【讨论】：