【问题标题】:Can't put an image as background on css [duplicate]无法将图像作为css的背景[重复]
【发布时间】:2020-02-13 08:37:20
【问题描述】:

我一直在尝试将图像作为背景,但由于某种原因,它不起作用。

您将在下面找到我的HTMLCSS。图片名称为Background,大小为1280*720

HTML

<!DOCTYPE html>
    <html>
      <head>
              <title></title>
              <link rel="stylesheet" type="text/css" href="test.css">


        </head>
        <body >

            <header>

            </header>






            <footer></footer> 

        </body>      

    </html>

CSS:

body {
background: url("C:\Users\pro tech\Desktop\site web\Nouveau dossier: background.jpeg") no-repeat;

background-size: cover;
}  

【问题讨论】:

  • 图片的网址看起来很不对;你能展示一下你的项目的文件结构吗?
  • @Deepak 我尝试在内容更多但仍然存在相同问题的正文上进行此操作

标签: html css


【解决方案1】:

图片 url 应该是相对于你的 css 文件而不是你的桌面。或者在你的情况下相对于 html 文件,因为你有内联 css。

网址不正确。

应该是……

背景:url("/images/background.jpeg")

【讨论】:

    【解决方案2】:

    背景图片的 url 需要从该 CSS 文件所在的位置开始。如果你需要返回一个文件夹,你可以使用../,这让我想到了我的下一件事:确保你使用的是正斜杠而不是反斜杠。

    示例:如果您的桌面上现在有 CSS 文件,您的路径将如下所示: url("site%20web/Nouveau%20dossier/background.jpeg");

    【讨论】:

      【解决方案3】:

      可能是因为网址链接上有空格? 尝试将空白网址替换为 %20

      body {
      background: url("C:\Users\pro%20tech\Desktop\site%20web\Nouveau dossier\background.jpeg") no-repeat;
      
      background-size: cover;
      } 
      

      或者只是删除详细URL,如果图像与html和css在同一文件夹中,则使用图像文件名

      body {
      background: url("background.jpeg") no-repeat;
      
      background-size: cover;
      } 
      

      【讨论】:

        【解决方案4】:

        将图像放在您拥有索引和 Css 的同一文件夹中,然后将 css 添加到文件的新位置:

        例如:

        body {
        background : URL("./image.jpeg") no-repeat;
        }
        

        【讨论】:

          【解决方案5】:

          您需要为正文添加一些高度或内容。现在高度是 0px 所以背景图片没有显示

          【讨论】:

            猜你喜欢
            • 2021-04-09
            • 2020-10-05
            • 2021-03-14
            • 2021-04-20
            • 1970-01-01
            • 2018-03-22
            • 1970-01-01
            • 2017-11-23
            • 1970-01-01
            相关资源
            最近更新 更多