【问题标题】:div's background-image not showndiv 的背景图片未显示
【发布时间】:2013-11-07 12:16:41
【问题描述】:

我动态地执行以下操作:

'<div><img class="image-blockUI" src="../../images/Edit.gif" /><p class="text-blockUI">Being edited.</p></div>'

css:

.image-blockUI 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.text-blockUI
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

上面的代码正在工作(图像和文本水平居中,图像在文本上方)但现在我不想使用图像(img),而是想用 div 的背景图像替换它,所以我在下面做:

'<div"><div class="image-blockUI" /><p class="text-blockUI">Being edited.</p></div>'

现在我用这个替换 image-blockUI:

.image-blockUI 
{
    height: 30px;
    width: 24px;
    background-image: '../../images/Edit.gif';
}

在这种情况下,显示文本并水平居中,但不显示背景图像。我做错了什么?

【问题讨论】:

  • 请记住,CSS 中的文件引用与 CSS 文件相关,而不是 HTML 文档。
  • 可能是图片路径不正确?如何从css自动生成路径?

标签: css image html alignment


【解决方案1】:

应该是background-image: url('../../images/Edit.gif');

【讨论】:

    【解决方案2】:

    如果您在css文件中使用相对路径,则该路径与文件(.css)的位置有关,因此如果您的css文件与原始html不在同一文件夹中,则需要更正它

    【讨论】:

    • 不,在您的情况下,将显示原始图像图标而不是没有图像/图标。,
    猜你喜欢
    • 2014-02-11
    • 2020-03-08
    • 2023-04-05
    • 1970-01-01
    • 2013-09-19
    • 1970-01-01
    • 2019-02-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多