Css 背景图像到div

出于某些原因，背景中的图像不希望出现以下代码：

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

.图像背景{
背景：无重复中心；
框大小：边框框；
背景色：#中交！重要；
背景图片：url（“~/images/icons/button.png”）！重要；
宽度：420px！重要；
高度：315px！重要；
}
一些文字。。。

---

将显示颜色和文本，但不会显示图像。我三次检查图像的正确路径，因为我能够使其显示的唯一方法是直接使用：

我真正想做的是将一个图像作为背景，并在另一个图像的顶部，但是我需要让它工作起来。

你的样式表在一个单独的文件夹中吗？如果是这样，你必须使用

。/images

导航到它，这是一种常见的情况。

问题必须在你输入的url上……你应该根据图像或样式表所在的文件夹尝试以下操作

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

更改背景图像：url（“~/images/icons/button.png”）！重要的到

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

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

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

正如您在我的代码片段中看到的，除了url之外，代码中的所有内容看起来都很好。请尝试（..）或（.）符号，而不是（~）符号

。图像背景{
背景：无重复中心；
框大小：边框框；
背景色：#中交！重要；
背景图像：url（'http://animalspicwallpaper.com/wp-content/uploads/2013/11/Happy_Puppy_Wallpaper_ckrd.jpg")重要,；
宽度：420px！重要；
高度：315px！重要；
}

一些文字。。。

样式格式在同一个.cshtml文件中，在代码上方我尝试了代码，图像看起来很好