c# - MVC3 中的 CSS 背景图像——续

Question

我最近购买了一个 bootstrap 主题，我试图将其应用于我的 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 一切都出现在上面。

我检查了这里的问答，这对我没有帮助。 CSS background images in MVC3

如有任何不清楚的信息，请提前致歉。

Answer 1

你的图片位置有误。

这是你拥有的:

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

正如我们在您的屏幕截图中看到的那样，它是social-icons-set(请注意额外的“s”):