Question

出于某种原因，背景中的图像不希望出现在这里是代码：

<style type='text/css'>

     .image-background {
        background: no-repeat center center;
        box-sizing:border-box;
        background-color: #cccccc !important;
        background-image:url('~/images/icons/button.png') !important;
        width: 420px  !important;
        height: 315px !important;
    }

</style>

<div id="example" class="image-background">

   some text...

</div>

显示颜色和文字，但不显示图像。我三重检查这是图像的正确路径，因为我能够使其显示的唯一方法是直接使用：<img src="~/images/icons/button.png" />我真正想做的是将一个图像作为背景并在其中另一个图像，但我需要这个工作

Answer 1

如果您将样式表放在单独的文件夹中，则必须使用../images导航到该文件夹，这种情况很常见。

Answer 2

问题必须在您输入的网址上...您应该根据图片或样式表所在的文件夹尝试以下操作

 .image-background {
    background: no-repeat center center;
    box-sizing:border-box;
    background-color: #cccccc !important;
    background-image:url('../images/icons/button.png') !important;
    width: 420px  !important;
    height: 315px !important;
}

将background-image:url('~/images/icons/button.png') !important;更改为

background-image:url('../images/icons/button.png') !important;

或者您可以尝试一段时间，例如

background-image:url('./images/icons/button.png') !important; /*may not work. the double period is sure*/

正如您在我的代码段中看到的，代码中的所有内容看起来都很好，除了网址。而不是（〜）符号try（..）或（。）符号。

＆＃13;

     .image-background {
        background: no-repeat center center;
        box-sizing:border-box;
        background-color: #cccccc !important;
        background-image:url('http://animalspicwallpaper.com/wp-content/uploads/2013/11/Happy_Puppy_Wallpaper_ckrd.jpg') !important;
        width: 420px  !important;
        height: 315px !important;
    }

＆＃13;

<div id="example" class="image-background">

   some text...

</div>

＆＃13;

div的背景图片

2 个答案: