HTML 而非 CSS 中的背景图像答案

【问题标题】：Background images in HTML but not CSSHTML 而非 CSS 中的背景图像
【发布时间】：2020-06-20 10:15:06
【问题描述】：

做一个在线编程课程并完全坚持这一点。在 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>

【问题讨论】：

标签： css image background sprite

【解决方案1】：

问题是这样的：

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

第二行是 CSS 简写形式，按规则完全覆盖前一行。把它移到第一行之前，你会没事的。完成后删除显示“缺少图片”的img，这是没有必要的。

【讨论】：

【解决方案2】：

<!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>

【讨论】：

【解决方案3】：

这是我能提供的最大值：

 <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>。

【讨论】：

但是，我有一个新问题 - 现在当我添加 co-odinates 以尝试设置图像的起始位置（例如 url('images/IMG_6263.JPG') 0 0; ）图像消失了！
您需要将您的坐标添加到div，而不是image 并通过css btw。（并且高于background: radial-gradient(circle, black, white);）
你介意告诉我怎么做吗？我搞不定。