MVC3中的CSS背景图像 - 延续

Question

我最近购买了一个我尝试应用于MVC3 Web App项目的引导主题。

我在使用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的两个路径 and social-icons-set.png和所有内容都出现在up和up上。

我在这里检查了Q＆amp; A，这对我没有帮助。 CSS background images in MVC3

如果有任何不明确的信息，请提前道歉。

Answer 1

您的图片位置错误。

这是你拥有的：

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

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

Answer 2

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

因为这是CSS文件和您的信息所暗示的地方。