无法在标题中显示背景图像 [英] Cannot Display Background Image in Header

问题描述

我正在使用VS2013社区和Bootstrap作为我的主要CSS提供商。我想在我正在开发的网站的标题中显示背景图像。我有以下HTML：

I am using VS2013 Community with Bootstrap as my main CSS provider. I want a background image to be displayed in the header of the website I am developing. I have the following HTML:

<div class="container header">
    <div class="row bg" style="height: 170px">
        <div class="col-xs-12 col-sm-10">
            <nav class="pull-right" style="padding-top 100px">
                <ul class="nav navbar-nav">
                    4 <li>..</li>s removed
                </ul>
            </nav>
        </div>
        <div class="hidden-xs col-sm-2">
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

我还有以下CSS来定义我的背景图片，它已被放置在Content文件夹中的单独Site.css文件中：

I also have the following CSS to define my background image, which has been placed in a separate Site.css file in the Content folder:

.bg {
    background-image: url('~/Content/Graphics/ClubHeader.jpg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

如果我将光标放在上面的网址上，我会看到我期待的图像，显​​示网址是否正确。



但是，当我运行代码时，不显示背景图像。其他所有内容都完全按照我的预期显示。有人可以解释为什么没有显示图像吗？

If I place the cursor on the url above, I get a display of the image I am expecting, which shows the url is correct.

However, when I run the code, the background image is not displayed. Everything else is displayed exactly as I would expect. Could anybody please explain why the image is not displayed?

推荐答案

使用firebug / developer工具（或类似的工具）并检查该元素。我猜测生成的图片网址不正确。您还将知道是否还有其他问题。

如果您仍然无法确定问题，请告诉我们。

Use firebug / developer tool (or similar tools) and inspect that element. I am guessing the image URL that is generated is not correct. You will also know if there is any other issue.
Let us know if you are still not able to determine the issue.

您好，



代字号〜是用于解析asp.net中网址的web应用程序根运算符，不能在CSS中以相同的方式使用。



如果你改变...

Hi,

The tilde mark ~ is a web application root operator used to resolve urls in asp.net, and cannot be used in the same way within CSS.

If you change ...

background-image: url('~/Content/Graphics/ClubHeader.jpg');

to ...

to ...

background-image: url('/Content/Graphics/ClubHeader.jpg');

...希望它有所帮助。

... hope it helps.

这篇关于无法在标题中显示背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！