Html CSS背景图像不工作_Html_Css_Background Image

Html CSS背景图像不工作

html css

Html CSS背景图像不工作,html,css,background-image,Html,Css,Background Image,我不知道发生了什么，但似乎背景图像没有加载 test.html： <div class="pToolContainer"> <span class="btn-pTool"> <a class="btn-pToolName" href="#"></a> </span> <div class="pToolSlidePanel"></div> </div>

我不知道发生了什么，但似乎背景图像没有加载

test.html：

<div class="pToolContainer">
     <span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>
     <div class="pToolSlidePanel"></div>
</div>

顺便说一下，该图像确实存在于test.html文件夹中。

在.btn pTool类中添加“display:block；”，这是不正确的。跨度可以有背景/图像（在IE8和Chrome中测试，作为一种健全性检查）

问题在于a.btn-pToolName标记为display:block。这导致webkit浏览器不再在外部范围中显示背景。IE似乎表现出了OP想要的样子

OP chance.btn pTool类被显示：inline块，使其像span/div混合体一样工作（以背景为例，但不会导致布局中断）

那是空的。尝试添加一个不间断的空格以提供链接并跨越某些内容：

 <span class="btn-pTool">
 <a class="btn-pToolName" href="#">&nbsp;</a>
 </span>

还值得注意的是，CSS规范指出不能为跨度提供背景图像，因为跨度不是块元素。将背景图像代码放在div的类样式中，或者使用

而不是。一些浏览器可能允许您在一个范围内放置背景，但并非所有浏览器都允许（可能是IE的旧版本）。
我尝试了您的代码，发现如果我们放置背景图像：url（image.png）btn pToolName
中编码>并更改颜色：#000000
。它以背景显示图像
我的测试css：
           .btn-pTool {
                margin: 0;
                padding: 0;
            }

            .btn-pToolName {
                text-align: center;
                width: 26px;
                height: 190px;
                display: block;
                color: #000000;
                text-decoration: none;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 1em;
                line-height: 32px;
                background-image: url(defalut.png);
                background-repeat: no-repeat;
            }

和测试html：
        <div class="pToolContainer">
            <span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
            <div class="pToolSlidePanel"></div>
        </div>



希望这有帮助。
除了显示：块
或显示：内联块

尝试为您的.btn pToolName
提供足够的填充
，并确保背景位置的值正确
您已将类“btn pTool”应用于作为内联元素的span。。。给它添加display:block
，并在
标记中添加一些文本，然后查看结果
尽管默认的背景位置存在，但也为图像提供背景颜色和背景位置。。但是试着这样做
使用shorthand属性作为背景属性，并键入图像所在的文件夹名称
.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; 
}

使用此选项可添加背景---
您还可以在其中添加重复或不重复功能
background: url('images-path')   no-repeat 00;

下面的代码可以工作。将单引号中的文本替换为图像名称。如果它在同一个文件夹中，如果不是，请添加。/foldername/'yourmagename'，我希望这会有所帮助
注意：
大多数程序员都不建议使用单引号，但我使用单引号，它是有效的。另外，如果你想写一个PHP，你会很感激它能做什么，例如，从变量中自动添加背景图像等等

.btn pTool{
保证金：0；
填充：0；
背景图像：url（“字段的名称”）；
高度：100px；
宽度：200px；
显示：块；
}
.btn pToolName{
文本对齐：居中；
宽度：26px；
高度：190px；
显示：块；
颜色：#fff；
文字装饰：无；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
字号：1em；
线高：32px；
}
测试文本
我面临这个问题。我的html如下所示：
<th style="background-image:url('Image.png');">
</th>



我按照@shankhan的建议在th中添加了“ ”，图像开始显示出来
<th style="background-image:url('Image.png');">
   &nbsp;
</th>

简单的方法是，复制并通过此背景图像：url（../slide\u button.png）
而不是背景图像：url（slide_button.png）
在这种情况下，我们需要使用../before路径。
要么你需要给出完整的路径。
另一件事是，在进行任何更改之前，只需清除浏览器历史记录，然后刷新页面。
1.在样式表中使用此代码
body {
  background: URL("slide_button.png");
  background-size: 100% 100%;
  background-repeat: no repeat;

2.将img和html文件放在一个文件夹中
3.如果不起作用，尝试将png文件转换为jpg，只需在facebook上上传图片，然后从facebook下载图片，它将自动转换为jpg，同时上传勾号私人设置，以便您的朋友无法查看该图像
4.如果在我的表单中仍然不起作用..
style.css和slide_button.png是否在同一文件夹中？是的，它们在同一文件夹中。你能通过书写看到图像吗？在它们之间写一些东西，检查它是否起作用只是为了检查8，Chrome可能允许你为跨距提供背景，虽然这不是CSS规范的一部分——所以他们只是被原谅了。你应该对我的回答发表评论，而不是发布一个新的回答来回应我：）我在这个stackexchange网站上没有足够的“信用度”（我在初创公司上没有）。另外，我也给了你一个替代答案。也。。。规范可能会说一件事，但现实是另一回事。按照规范编写代码非常棒，但我生活在现实世界中……：）关键不在于仅从原则上“按规范编写代码”。我们假设IE和Chrome以外的浏览器，以及未来可能的浏览器，都将遵循该规范。这就是它的用途。尤其是现在有这么多支持网络的手机，你不应该假设spans总是有背景的。既然同样简单，为什么不遵循规范呢？如果包含位置和重复信息，背景图像
将中断。我相信你想在第二行中使用background
。我不明白。。有人可以在否决投票时发表评论吗？我也面临这个问题，用你的方式来解决它。但是，为什么我要添加一个
，然后图像就会显示出来？@CYB:我不是专家。但我相信默认情况下空单元格是隐藏的。您可以添加css，如表{empty cells:show；}所述
<span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>

.btn-pTool, .btn-pToolName {
    content: " ";
}

<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>

<th style="background-image:url('Image.png');">
</th>

<th style="background-image:url('Image.png');">
   &nbsp;
</th>

body {
  background: URL("slide_button.png");
  background-size: 100% 100%;
  background-repeat: no repeat;