Html 背景图像不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20445433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background-image not showing
提问by kduan
I am trying to turn images that appear on the site using the tag into a background image. MY first code looked like this
我正在尝试将使用标签显示在网站上的图像转换为背景图像。我的第一个代码看起来像这样
Html:
网址：
<img class= "house" src="images/House-03.png" width="122px" height="118px"/>
CSS
CSS
.house {
display:block;
position:absolute;
float:right;
bottom:0;
right:0;
}
}
Now I'm trying to change it like this:
现在我试图像这样改变它：
Html
html
<p class= "house"> </p>
CSS
CSS
.house {
display:block;
position:absolute;
background-image:url(../images/House-03.png);
width:122px;
height:148px;
float:right;
bottom:0;
right:0;
}
Except the image doesn't appear! Any help will be appreciated, Thanks!
除了图像没有出现！任何帮助将不胜感激，谢谢！
回答by rand0m
try setting the background image size property
尝试设置背景图像大小属性
.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;
}
hope this helps?
希望这可以帮助？
回答by user3037493
put quotes around your image url
在你的图片网址周围加上引号
background-image:url("../images/House-03.png");
ETA : per comment below... quotes are indeed not required! just mentioned it here to troubleshoot the original question.
ETA：根据下面的评论......确实不需要引号！刚刚在这里提到它来解决原始问题。
回答by haej
I personally had the pathname and url syntax correct. The only issue was
我个人的路径名和 url 语法是正确的。唯一的问题是
background-img: url("")
needing to be changed to..
需要改成..
background: url("")
And my background pattern revealed itself triumphantly.
我的背景图案得意洋洋地显露出来。
回答by Damian Green
Make sure your image is accessible!
确保您的图像可访问！
After a lot of frustration, it turned out that my problem had to do with the image not being accessible... You can always test out your code with another image on another site that is certainly accessible...
在经历了很多挫折之后，结果证明我的问题与图像无法访问有关......您总是可以在另一个肯定可以访问的网站上使用另一个图像测试您的代码......
