当前位置: 首页 > 知识库问答 >
问题:

背景图像未从internet加载

通建安
2023-03-14

我是一个新的编码,我正在尝试设置一个图像作为我的CSS页面的背景。我可以让背景改变颜色,但当我尝试使用一个实际的图像,什么都不加载。

以下是我的HTML:

<!DOCTYPE HTML>
  <head>
    <title>Beckett Wedding</title>
    <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
    <link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300&display=swap" 
     rel="stylesheet">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div class = "container-fluid" id = "background-first-page">
    <h1>Beckett Wedding</h1>
    <div class = "container-fluid">
      <div class = "row"> 
        <div class = "col-2"> <a href = "thebrides.html"> The Brides </a> </div>
        <div class = "col-2"> <a href = "thebridalparty.html"> The Bridal Party </a> </div>
        <div class = "col-2"> <a href = "RSVP.html"> RSVP </a> </div>
        <div class = "col-2"> <a href = "Directions.html" > Directions </a> </div>
        <div class = "col-2"> <a href = "Details.html"> Details </a> </div>
        <div class = "col-2"> <a href = "Gifts.html"> Gifts </a> </div> 
      </div>
    </div>
  </div>
  
  </body>
  </html>

以下是我的CSS:

#background-first-page {
    background-image: url ("https://images.unsplash.com/photo-1589401774008-64bcae0af959? 
    ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mjc3fHxzcHJpbmclMjBmbG93ZXJzfGVufDB8fDB8&ixlib=rb- 
    1.2.1&auto=format&fit=crop&w=500&q=60");
    height: 100vh;
}
body {
color: blue;
font-family: 'Cormorant Infant', serif;
}

我做错了什么?

共有1个答案

公冶泰
2023-03-14

删除url(“image-url”);之间的空格。

 类似资料:
  • 问题内容: 我已经按照所有的教程讲完话了。我在CSS样式表中的身体内部指定了背景,但是页面仅显示空白的白色背景。图片与.html和.css页面位于同一目录中。本教程说 已弃用,所以我在CSS中使用 没有成功。这是整个CSS样式表: 问题答案: 这是另一个图片网址结果..工作正常…我只是放了一个图片路径..请检查一下..

  • 问题内容: 我有一个正在编写的CSS页面,我需要在一个类中应用背景图像,然后使用另一个类将一个局部透明的背景图像放在已经存在的背景图像之上。这只是一个简单的字眼,所以让我做一个示范。 在此示例中,第一个div应该具有背景图像1,第二个div应该具有背景图像1,但是滤镜图像位于其顶部,然后第三个div应该是图像2,第四个应该是图像2并且上面具有相同的滤镜。 但是,在此示例中,.backgroundF

  • 我正在构建一个聊天应用程序,当我向用户发送一个图像时,图像并没有覆盖我给出的背景,而是给出了顶部和底部的有线填充。如何解决这个问题。我给出的填充是每边7dp,这里是我的代码

  • 除了背景颜色,也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中,使用 background-image属性来定义背景图像的路径,取值为 none | url,默认值为 none。 url 可以是相对路径,也可以是绝对路径。使用相对路径时,url 是相对于 css 所在的文件,而不是要设置样式的HTML文件。如,下面代码表示,使用 css 文件所在目录下的 img 文件夹下的图像 bg.g

  • 问题内容: 此处已触及该主题,但未提供有关如何创建3D图并在平面中以指定高度插入图像的指示。 因此,要提出一个简单且可复制的案例,假设我使用以下代码创建了一个3D图: 在视觉上,我们有: 在级别上,这里是避免重叠的视觉偏移, 我想插入一张图像, 表示曲线显示特定值的元素。 怎么做? 在此示例中,我并不关心元素与其值之间的完美匹配,因此请随时上传您喜欢的任何图像。另外,如果对匹配不满意,有没有办法让

  • 我有一个angular项目,其中有一个大的背景图像,填充页面,还有一个简单的侧边栏,其中包含链接,单击后,会将背景的url更改为另一个图像(来自cdn)。由于这些图像相当大,需要一两秒钟才能加载,这很明显,我想添加一个预加载程序,但我不确定如何在angular 2中完成。 在我的html中,我有这个: 变量urlImage填充在组件的构造函数中,侧栏链接在单击时用一个简单的函数改变它的值,如下所示