Html CSS 背景图像不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4859375/
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
CSS background-image not working
提问by Twidizle
I don't know what is going on but it seems that the background image isn't loading.
我不知道发生了什么，但似乎没有加载背景图像。
test.html:
测试.html：
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
style.css:
样式.css：
.btn-pTool{
margin:0;
padding:0;
background-image: url(slide_button.png);
background-repeat:no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
By the way the image does exist in the folder of test.html.
顺便说一下，该图像确实存在于 test.html 文件夹中。
回答by Manny
Add "display:block;" in your .btn-pTool class
添加“显示：块；” 在您的 .btn-pTool 类中
回答by Best website designer
Use shorthand property for the background property and type the folder name where thje image had been located.
使用背景属性的速记属性并键入图像所在的文件夹名称。
.btn-pTool{
margin:0;
padding:0;
background:url("../folder name/slide_button.png") no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
回答by user007
I faced this problem. My html was as below:
我遇到了这个问题。我的 html 如下：
<th style="background-image:url('Image.png');">
</th>
I added " " as @shankhan suggested inside th and the image started showing up.
我在 th 中添加了@shankhan 建议的“ ”，图像开始出现。
<th style="background-image:url('Image.png');">
</th>
回答by Robin Maben
In addition to display:blockOR display:inline-block
除了display:block或display:inline-block
Try giving sufficient paddingto your .btn-pToolNameand make sureyou have the correct values for background-position
尝试给padding你足够的，.btn-pToolName并确保你有正确的值background-position
回答by Mahima
You have applied class "btn-pTool" to span which is an inline element... give display:blockto it and also add some text inside the<a>tag and the see the result.
您已将类“btn-pTool”应用于跨度，这是一个内联元素......给display:block它并在<a>标签内添加一些文本并查看结果。
Also give a background color and background position as well to the image though default background position is there.. but try doing it this way
尽管默认背景位置在那里，但也要为图像提供背景颜色和背景位置。但请尝试这样做
回答by user3750236
The easy way is that, copy and past this background-image: url(../slide_button.png);instead of background-image: url(slide_button.png);In such case we need to use ../ before path.
Either you need to give full path.
One other thing is that, in case before doing any change just clear the browser history and then refresh the page.
简单的方法是，复制并
传递这个背景图像：url(../slide_button.png);而不是background-image: url(slide_button.png);在这种情况下，我们需要在路径之前使用 ../ 。要么你需要给出完整的路径。另一件事是，万一在进行任何更改之前，只需清除浏览器历史记录，然后刷新页面即可。
回答by user3427015
1.Use this code in stylesheet
1.在样式表中使用此代码
body {
background: URL("slide_button.png");
background-size: 100% 100%;
background-repeat: no repeat;
2.Put img and html file together in single folder 3.IF not worked try converting png file to jpg for that just upload pic on facebook and then download that pic from facebook it will automatically converted into jpg and while uploading tick mark private setting so that ur friends cant view that image 4.if still not work imform me..
2.将 img 和 html 文件放在单个文件夹中 3.如果不起作用，请尝试将 png 文件转换为 jpg，以便在 facebook 上上传图片，然后从 facebook 下载该图片，它会自动转换为 jpg 并在上传刻度标记私人设置时你的朋友看不到那张图片 4.如果还是不行请通知我..
回答by user3427015
Use this one to add background---
用这个来添加背景---
background-image: url('images-path');
You can also add repeat or no-repeat function in it!
您还可以在其中添加重复或不重复功能！
background: url('images-path') no-repeat 00;
回答by Jose Faeti
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
Try to add display:blockto .btn-pTool, and give it a width and height.
尝试添加display:block到.btn-pTool，并为其指定宽度和高度。
Also in your code both tbn-pTool and btn-pToolName have no text content, so that may result in them not being displayed at all.
同样在您的代码中 tbn-pTool 和 btn-pToolName 都没有文本内容，因此可能导致它们根本不显示。
You can try to force come content in them this way
你可以尝试以这种方式强迫他们满足
.btn-pTool, .btn-pToolName {
content: " ";
}
回答by techspeque
The code below works. Replace the text within the single quoteswith your image name. If it is in the same folder, if not add ../foldername/'yourimagename'I hope that helps.
下面的代码有效。用您的图像名称替换单引号内的文本。如果它在同一个文件夹中，如果没有添加../foldername/'yourimagename'我希望有帮助。
NOTE:
笔记：
use of the single quotes by most of the programmers is not advised but I use it and it works. Also, if you would write a PHP you would appreciate what it can do i.e. add the background image automatically from the variable etc.
不建议大多数程序员使用单引号，但我使用它并且它有效。此外，如果您要编写 PHP，您会很感激它可以做什么，即从变量等自动添加背景图像。
<html>
<head>
<style type="text/css">
.btn-pTool{
margin:0;
padding:0;
background-image: url('your name of the field');
height:100px;
width:200px;
display:block;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
</style>
</head>
<body>
<div class="pToolContainer">
<span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
<div class="pToolSlidePanel">Test text</div>
</div>
</body>
</html>
