CSS url 图像不可见 Pythonanywhere答案

【问题标题】：CSS url image not visible PythonanywhereCSS url 图像不可见 Pythonanywhere
【发布时间】：2020-09-16 06:21:19
【问题描述】：

我创建了一个标题，其中文本根据后端的输出而变化。但是，构成此标题的图像是不可见的。

我将图像放在构成我的应用程序的静态文件中，并在 CSS 代码以及 Web 选项卡的静态文件部分中添加了图像的路径，如下所示：

CSS 代码：

.hero-image {
    background-image: linear-gradient(rgb(47, 50, 51), rgba(0, 0, 0, 0.5)), url("/images/Ax8yBTP.jpg");
    height: 25%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

静态文件：/home/jejrhom1/mysite/static/images

你知道错误来自哪里吗？

谢谢！

【问题讨论】：

您的 CSS 是否在单独的文件中？这个文件的路径是什么？
您好！是的，路径是：/home/jejrhom1/mysite/static/content/bootstrap.min.css
这段代码.hero-image是你在bootstrap.min.css中写的？
是的，我是在 bootstrap.min.css 中写的
我写了一个答案。尝试那里的路径舞会

标签： python html css pythonanywhere

【解决方案1】：

根据您的路径，正确的是url("/static/images/Ax8yBTP.jpg")

尝试根据您的 css 文件位置使用相对路径。如果您的 css 路径类似于 /home/jejrhom1/mysite/static/css/style.css - 那么图像的正确路径将是

url("../images/Ax8yBTP.jpg");

../ 这部分意味着我们返回上一层，到文件夹static，我们可以看到css 和images。

【讨论】：

我刚刚尝试过这条路径，但不幸的是它不起作用......
你的图片是 /home/jejrhom1/mysite/static/images/Ax8yBTP.jpg ?
有现场演示吗？尝试测试 stet 只有background-image: url("../images/Ax8yBTP.jpg"); 没有渐变，否则，看看。
实际上，当我在本地使用该应用程序而不是在 pythonanywhere 中时，它可以工作。我删除了渐变等，仍然无法正常工作。如果有任何解决方案，我会做更多的研究并分享解决方案哈哈。