css中指定的背景图像无法渲染

时间:2017-05-12 20:39:26

标签: html css path background-image

我有一个PHPBB主题,我开始构建。在CSS文件中,我有三个项目 - 一个正文和两个div - 带有背景图像。 div的背景图片已停止在所有浏览器中使用。

展示主题的网站位于:https://www.tarazedi.com/index.php?style=7

问题图片在这里:https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png

CSS位于wTcFresh / theme /.

图像都位于相同的位置,但似乎存在路径问题,但工作非常奇怪。我尝试过使用相对和绝对URL。我试过url(x);,url(' x');和url(" x");并且还改变了其他背景元素。在任何情况下都没有横幅和徽标图像开始工作,但身体图像工作正常,尽管在同一个地方并使用相同的语法。当我在Chrome中检查div的计算样式时,图像将正确显示为完整的绝对URL,但是相对链接链接到tarazedi.com/images/site_banner.png,它返回500错误,因为该URL显然是无用的。在Edge和Firefox中,检查器显示指向图像的正确链接,但仍然无法呈现。

我已经清除浏览器和站点端缓存,每次尝试修复它。

我很困惑。我错过了什么?



body {
    color: #CCCCCC;
    background-color: #000000;
    background-image: url("images/bg.jpg");
    background-attachment: fixed;
}

.headerbanner {
    border: #009900 solid 4px;
    border-radius: 40px;
    background-image: url("images/site_banner.png");
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

.headerlogo {
    border: #003300 solid 4px;
    border-radius: 36px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url("images/site_logo.png");
    background-attachment: fixed;
    background-position: left center;
    vertical-align: middle;
}




3 个答案:

答案 0 :(得分:0)

要达到预期效果,请调整背景位置,而背景图像

则不会出现问题

1.删除背景:位置以查看差异

enter image description here

答案 1 :(得分:0)

编辑它因此修复了问题,现在它正确呈现。非常感谢你!



.headerbanner {
    border: #009900 solid 4px;
    border-radius: 40px;
    background-image: url("images/site_banner.png");
    background-position: right;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.headerlogo {
    border: #003300 solid 4px;
    border-radius: 36px;
    background-image: url("images/site_logo.png");
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: left;
    align-items: center;
}




答案 2 :(得分:-1)

您正在使用images/bg.jpg。这是指一个名为" images"的文件夹。在您当前的目录中。如果用/images/bg.jpg替换它,它将是一个名为" images"的目录。在网站的根目录。