MVC3 中的 CSS 背景图像 - 续答案

【问题标题】：CSS Background Images in MVC3 - ContinuationMVC3 中的 CSS 背景图像 - 续
【发布时间】：2013-03-01 11:34:24
【问题描述】：

我最近购买了一个引导主题，我正试图将其应用于我的 MVC3 Web 应用项目。

我在获取 social-icons.css 中的背景图片以进行渲染时遇到问题。

我在 _Layout.cshtml 中引用过：

link href="@Url.Content("~/Content/social-icons.css")" rel="stylesheet"      type="text/css"

在标题中。

在 social-icons.css 中：

    [class^="social-"],
    [class*="social-"] {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: .3em;
    line-height: 40px;
    vertical-align: text-top;
    background-image: url("img/icons/social-icon-set.png");
    background-position: 40px 40px;
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-border-radius: 50em;
       -moz-border-radius: 50em;
            border-radius: 50em;
}

我已经检查了 social-icons.css 的两个路径和 social-icons-set.png，一切都出现在 up 和 up 上。

我在这里查看了问答，但这对我没有帮助。 CSS background images in MVC3

对于任何不清楚的信息，请提前道歉。

【问题讨论】：

您好 Farrowdm，欢迎来到 StackOverflow。你的问题对我来说很好很清楚，所以我希望我们能提供帮助。

标签： c# css asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

你的图片位置有误。

这就是你所拥有的：

background-image: url("img/icons/social-icon-set.png");

我们可以看到您的屏幕截图，它是 social-icons-set（注意多余的“s”）：

【讨论】：

哈哈，我的胃病了。非常感谢。
@farrowdm 呵呵没问题，这些事情都发生在我们所有人身上！欢迎来到 SO :)

【解决方案2】：

CSS 文件中的任何路径总是相对于 css 文件本身。 png 是否位于Content/img/icons/social-icon-set.png 中？

因为这是 CSS 文件和您的信息所建议的位置。

【讨论】：

显然不是。（见 Mattytomo 的回答）