logo标签列表

CSS 背景图片无法正常显示

htmlcssbackground-image
14

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

test.html：

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

style.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; 
    }

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

1
style.css和slide_button.png是否在同一个文件夹中？ - shankhan
是的，它们在同一个文件夹中。 - Twidizle
你能通过写入http://imagepath/slide_button.png来查看图片吗？ - shankhan
2
请在<a></a>中编写一些内容以检查其是否正常工作，只是为了检查。 - shankhan
13个回答
5
在你的 .btn-pTool 类中添加 "display:block;"。
4
使用背景属性的速记属性，并输入图像所在的文件夹名称。
.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; 
}
4
我可以帮忙翻译，请查看以下内容：

我遇到了这个问题。我的html如下：

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

我按照 @shankhan 的建议在 th 中添加了“&nbsp”，然后图像开始显示了。
<th style="background-image:url('Image.png');">
   &nbsp;
</th>
我也遇到了这个问题，并使用了你的方法来解决它。但是，为什么我要添加&nbsp，然后图片才会出现？ - CYB
@CYB：我不是专家。但我相信空单元格默认是隐藏的。你可以像这里所说的那样添加CSS，例如 table { empty-cells:show; } - user007
1

除了 display:block 或者 display:inline-block 之外

尝试为你的 .btn-pToolName 提供足够的 padding，并确保你有正确的 background-position 值

我不明白...有人可以在点踩的同时留下评论吗？ - Robin Maben
0

使用此代码添加背景---

background-image: url('images-path');

你也可以在其中添加重复或不重复的功能！

background: url('images-path')   no-repeat 00;
1
如果您包含位置和重复信息，background-image会出现问题。我认为您想在第二行使用background。 - MetalFrog
0
以下代码可行。请将单引号中的文本替换为您的图像名称。如果它在同一个文件夹中，如果不是，请添加../foldername/'yourimagename'希望这有所帮助。 注意：

大多数程序员不建议使用单引号，但我使用它并且它有效。此外，如果您编写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>
0
<span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>

尝试在 .btn-pTool 中添加 display:block，并为其设置宽度和高度。
此外，在您的代码中，tbn-pTool 和 btn-pToolName 都没有文本内容，这可能导致它们根本不显示。
您可以尝试通过以下方式强制为它们添加一些内容。
.btn-pTool, .btn-pToolName {
    content: " ";
}
0
 <span class="btn-pTool">
 <a class="btn-pToolName" href="#"></a>
 </span>

这是空的。尝试添加一个不间断空格来给链接和跨度一些内容：

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

值得注意的是，CSS规范指出，你不能给一个span元素设置背景图片，因为span不是块级元素。将背景图片代码放在div的class样式中，或者使用

标签代替标签。一些浏览器可能允许你在span中设置背景，但并非所有浏览器都支持（例如旧版本的IE）。

0
我已经尝试了你的代码，发现如果我们把background-image: url(image.png);放在btn-pToolName中，并将color:#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>

希望这能有所帮助。
0

@TheBigO，那不正确。跨度可以有背景/图像（在IE8和Chrome中进行了健全性检查）。

问题在于a.btn-pToolName被标记为display:block。这会导致Webkit浏览器不再显示外部跨度的背景。IE似乎呈现出OP想要的效果。

OP将.btn-pTool类更改为display:inline-block，以使其像跨度/ div混合体一样工作（获取背景，但不会破坏布局）。

IE8和Chrome可能允许您为跨度元素设置背景，尽管这不是CSS规范的一部分 - 所以它们只是宽容。您应该在我的答案上发表评论，而不是发布新答案来回复我 :) - Olhovsky
我在这个StackExchange网站上的“信誉度”不够（但在创业公司方面有）。因此，我无法发表评论。另外，我还提供了一个替代你回答的方法。而且...规范可能会说一些事情，但现实是另一回事。编写符合规范的代码固然好，但我生活在现实世界中... :) - Sean
重点不在于仅仅为了原则而“按规范编写代码”。我们假设规范的制定是为了让除IE和Chrome以及未来可能出现的浏览器之外的其他浏览器都能够遵循规范。尤其是现在有很多支持web的手机，因此您不应该认为跨度（span）永远都会有背景色。既然遵循规范同样容易，为什么不这样做呢？ - Olhovsky
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接