做一个在线编程课程，完全被这一点卡住了。 在括号中尝试过同样的事情/原子/Sublime，并且都做了同样的事情。 如果在html中的src=“”中调用一个图像，我可以毫无问题地查看它，但是在CSS中尝试将其作为背景图像调用（无论是内部还是外部），总是会给出alt文本。
我在所有目录中都有该映像的副本，以帮助它定位它，并尝试了。。//“”“”等变体。
请帮忙！ 不解决这件事我就不能继续下去。 这张图片显示了我得到的预览:图片链接
代码如下:
null
<!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>null
问题是这样的:
background-image: url('bluebulletpoint.JPG');
background: radial-gradient(circle, black, white);
第二行是CSS速记形式，它根据规则完全覆盖前一行。 把它移到第一行之前，你就没事了。 当您删除了“缺少图片”的img后，就没有必要了。
null
<!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>
这是我所能提供的最大限度:
null
<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>