HTML 而非 CSS 中的背景图片

Question

正在上在线编程课程，完全卡在了这一点上。在 Brackets / Atom / Sublime 中尝试过同样的事情，并且都做同样的事情。如果在 html 中的 src="" 中调用它，我可以毫无问题地查看图像，但尝试在 CSS 中将其作为背景图像调用（内部或外部）将始终提供替代文本。

我在所有目录中都有图像的副本以帮助它找到它并尝试了 ..// \ " " '' 等的变体

请帮忙！在我解决这个问题之前我不能继续前进。这张图片显示了我得到的预览：image link

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TEST CSS IMAGE LOCATOR</title>
  <style>
    #Maddie {
      height: 400px;
      width: 250px;
      background-image: url('bluebulletpoint.JPG');
      background: radial-gradient(circle, black, white);
    }
  </style>
</head <body>
<p>This is a picture of Maddie:</p>
<div id="Maddie">
  <img alt="missing picture" </div>
  <br><br>
  <div id="thisworks">
    <img src=bluebulletpoint.JPG>
  </div>
  </body>

</html>

Answer 1

这是我可以提供的最大值：

 <body>
        <p>This is a picture of Maddie:</p>
        <div style="background-image:url('bluebulletpoint.JPG'); background: radial-gradient(circle, black, white);height: 400px;
            width: 250px;" id="Maddie">
   
        </div>
        <br><br>
        <div id="thisworks">
              <img src=bluebulletpoint.JPG>
        </div>
    </body>

如果它在背景中，您的 div 中不需要 <img>。

Answer 2

问题是这样的：

      background-image: url('bluebulletpoint.JPG');
      background: radial-gradient(circle, black, white);

第二行是CSS shorthand形式，按照规则完全覆盖前一行。将它移到第一行之前就可以了。完成后，请删除显示“缺少图片”的 img，这不是必需的。

Answer 3

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TEST CSS IMAGE LOCATOR</title>
</head>

<style>
  #Maddie{
      background-image: url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  }
  img{
  height :100px;
  width :100px:
  
}
</style>
<body>
<p>This is a picture of Maddie:</p>
<div id="Maddie">
  <img alt="missing picture" src="https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/preview_image/animate-bird-preview.jpg">
  </div>
  <br><br>
  <div id="thisworks">
    <img src=https://i.ytimg.com/vi/ryUxrFUk6MY/maxresdefault.jpg>
  </div>
  </body>

</html>

HTML 而非 CSS 中的背景图片

Background images in HTML but not CSS

css

background

image

sprite