Question

我正在处理一个应用程序，并尝试使用CSS工作表中的@ URL.Content显示标题图像，如此

.jumbotron .header-image {
    min-width:1024px;
    min-height:267px;
    background-image: url('@Url.Content("~/Content/images/header.png")');

图像在那里，但我得到的是一个方框，标题应该是。我显示的很简单

     <div class="jumbotron">
           <div class="jumbotron header-image"></div>
     </div>

我哪里错了？

修改

@Jesse这就是全部：

.jumbotron {
  text-align: center;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

.jumbotron .header-image {
    min-width:1024px;
    min-height:267px;
    background-image: url('@Url.Content("~/Content/images/header.png")');
  }

<div class="jumbotron">
    <div class="jumbotron header-image"></div>
</div>

我无法弄清楚为什么这不起作用，它看起来是正确的

Answer 1

我相信你的两个背景样式声明会发生冲突，一个是在jumbotron，另一个是.header-image。你有什么理由想要使用：

<div class="jumbotron">
     <div class="jumbotron header-image"></div>
</div>

而不只是：

<div class="jumbotron">
     <div class="header-image"></div>
</div>

Answer 2

我有一些以下建议。看看它是否可以帮到你。有一步一步的方法。首先，代替代码＆lt; div class =“jumbotron header-image”＆gt;你可以简单地用它作为＆lt; div class =“header-image”＆gt;。因为，使用组合，您仍然可以获得所需的效果。 [我知道，你正在使用班级jumbotron来保持透明度] 其次，确保代码假定/呈现的路径是什么。正如您使用的是@ Url.Content（“〜/，它会为您提供您的应用程序根目录。这意味着如果您尝试将URL构建为http：//YOUR_APPROOT/Content/images/header.png [请适当更改您的APPROOT] ，在检查之前，并放入浏览器的地址栏，你应该看到图像。如果你不是，那么应该有一些关于路径的问题。只是一个猜测..文件夹内容，大写字母或小？检查一下。第三，来自SO的一些类似帖子可能会对你有所帮助。检查一下：使用@ Url.Content（“〜”）有什么好处 asp.net中样式表路径中的斜杠（/）vs波浪线斜杠（〜/）[参考本文的接受的答案] 希望这能帮助您解决问题。祝好运

从CSS文件中显示图像

2 个答案: