Question

我正在尝试将使用标记显示在网站上的图像转换为背景图像。我的第一个代码看起来像这样

HTML：

<img class= "house" src="images/House-03.png" width="122px" height="118px"/>

CSS

.house {
display:block;
position:absolute;
float:right;
bottom:0;
right:0;

}

现在我正试图改变它：

HTML

<p class= "house"> </p>

CSS

.house {
    display:block;
    position:absolute;
    background-image:url(../images/House-03.png);
    width:122px;
    height:148px;
    float:right;
    bottom:0;
    right:0;
}

除了图像没有出现！任何帮助将不胜感激，谢谢！

Answer 1

尝试设置背景图片大小属性

.house {
    display:block;
    position:absolute;
    background:url(../images/House-03.png);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    width:122px;
    height:148px;
    float:right;
    bottom:0;
    right:0;
}

希望这有帮助吗？

Answer 2

在图片网址旁边加上引号

background-image:url("../images/House-03.png");

ETA：以下评论......确实不需要报价！刚刚在这里提到它来解决原始问题。

Answer 3

我个人认为路径名和网址语法正确。唯一的问题是

background-img: url("")

需要更改为..

background: url("")

我的背景模式得意洋洋地展现出来。

Answer 4

确保您的图片可以访问！

经过很多挫折之后，事实证明我的问题与图片不可访问有关...你总是可以用另一个当然可以访问的网站上的另一张图片来测试你的代码......

Answer 5

如其他答案所示，有很多因素可以阻止背景显示。所以即使问题是“为什么图像不显示？”一个更普遍的问题是“我怎样才能找出为什么我的 CSS 规则似乎没有生效？”

我遇到了关于背景图像未显示的相同或类似问题，并且能够通过将 "!important" -qualifier 添加到我的 CSS 规则中找到答案。这使得图像出现，这让我意识到一定有其他一些具有更高优先级的 CSS 规则阻止了这条关于背景的特定规则生效。

总的来说，这是一个很好的故障排除技巧。如果某些 CSS 规则似乎没有任何效果，请尝试向其中添加“!important”，看看是否有帮助。如果是这样，请查找阻止您的规则生效的其他规则。

背景图像没有显示

5 个答案: