CSS 背景图像拒绝在 ASP.Net MVC 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9821921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Background-Image refuses to display in ASP.Net MVC
提问by Eon
I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:
我在 ASP.NET MVC 2 应用程序中显示背景图像时遇到问题。目前，在 ~/Views/Shared/Site.master 中，我将指向样式表的链接设置为：
<link href="<%:@Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
The image I plan to display is in my ~/Content/Images/Designs.png
我计划显示的图像在我的 ~/Content/Images/Designs.png 中
Here is what I have tried
这是我尝试过的
body
{
background-image: url(~/Content/Images/designs.png);
background-repeat: repeat;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
Other Tries Included:
包括其他尝试：
background-image: url(./Content/Images/designs.png);
background-image: url(Content/Images/designs.png);
background-image: url(Images/designs.png);
none of the above tries worked. What can I do?
以上尝试均无效。我能做什么？
回答by Darin Dimitrov
The url inside a CSS file is relative to the location of the CSS file.
CSS 文件中的 url 与 CSS 文件的位置相关。
So if we suppose that you have ~/content/foo.cssand you want to include ~/images/foo.pnghere's how to reference it inside foo.css:
因此，如果我们假设您拥有~/content/foo.css并且想要在~/images/foo.png此处包含如何在其中引用它foo.css：
background-image: url(../images/foo.png);
Don't use any ~inside a CSS file. It has no meaning.
不要~在 CSS 文件中使用任何内容。它没有任何意义。
So in your case if the CSS file is ~/Content/Site.cssand you want to reference ~/Content/Images/Designs.pngthe correct syntax is:
因此，在您的情况下，如果 CSS 文件是~/Content/Site.css并且您想要引用~/Content/Images/Designs.png正确的语法是：
background-image: url(images/designs.png);
If this doesn't work for you there might be different causes:
如果这对您不起作用，则可能有不同的原因：
- The image doesn't exist at that location
- You didn't specify width and height to the containing element so you don't see the image
- 该图像不存在于该位置
- 您没有为包含元素指定宽度和高度，因此您看不到图像
What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.
我建议您使用 FireBug 并检查相应的 DOM 元素，以准确查看应用了哪些样式和图像。
回答by eilenberger
This is what I had to do:
这就是我必须做的：
background-image: url('@Url.Content("~/images/foo.png")')
回答by LIDEN
If you use bundles and have the directory structure like :
如果您使用捆绑包并具有如下目录结构：
-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png
then you can make a separate bundle for content in subdirectories by defining the bundle in that subdirectory:
然后您可以通过在该子目录中定义包来为子目录中的内容制作一个单独的包：
bundles.Add(new StyleBundle("~/Content/lightbox/css/bundle")
.Include("~/Content/lightbox/css/lightbox.css"));
background-image: url(../images/close.png);
回答by tofortier
In my case I had to back out to the root and include a path to the Content directory.
在我的情况下，我不得不退回到根目录并包含一个到 Content 目录的路径。
So even if my directory structure looked like:
所以即使我的目录结构看起来像：
-Content
--css
---site.css
--img
---someImg.png
I couldn't do
我做不到
background-image: url(../img/someImg.png)
I had to do:
我必须做：
background-image: url(../../Content/img/someImg.png)
This worked locally in debug mode (no minification) and deployed to AWS (with minification) correctly.
这在调试模式下在本地工作（无缩小）并正确部署到 AWS（有缩小）。
Also, don't forget if you're using Bundle minification and you use @importin your CSS to still include the asset in the bundle. For example:
另外，不要忘记您是否使用 Bundle minification 并且@import在 CSS 中使用仍将资产包含在 bundle 中。例如：
main.css
@import url(../../Content/css/some.css)
Be sure to include some.cssin your bundle:
确保包含some.css在您的捆绑包中：
bundles.Add(new StyleBundle("~/Content/global").Include(
"~/Content/css/some.css",
"~/Content/css/main.css"));
No need to do this if you're using LESS or SASS bundlers as the handler knows how to find the files and include them (that's the point!); however, if you're doing it as a straight CSS import, the bundler won't know to include it when it minifies.
如果您使用的是 LESS 或 SASS 捆绑器，则无需执行此操作，因为处理程序知道如何查找文件并包含它们（这就是重点！）；但是，如果您将其作为直接 CSS 导入来执行，则打包程序在缩小时将不知道将其包含在内。
Hope this helps someone!
希望这可以帮助某人！
回答by Ghulam Dastgeer
This Works For Me
这对我有用
<div style="background-image:url('/images/home.jpg')">
AS i have images folder direct in my project so i used in url
因为我的项目中直接有图像文件夹，所以我在 url 中使用
/images/image.jpg
like
喜欢
<div style="background-image:url('/images/image.jpg')">
回答by Mosia Thabo
Keep it simple stupid.
保持简单愚蠢。
At all times, try to stick to relative paths with css url attribute.
在任何时候，尽量坚持使用 css url 属性的相对路径。
/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */
background-image: url("Images/YourImageUrl");
The problem with wrong urls is that css can't locate that image as it doesn't understand the convention used on that url, hence the image is not displayed. So to keep it simple use the reigning relative path approach, and you'll never have problems.
错误 url 的问题是 css 无法定位该图像，因为它不理解该 url 上使用的约定，因此不会显示图像。因此，为了简单起见，请使用主流的相对路径方法，您将永远不会遇到问题。
回答by KellBell12
For anyone experiencing a similar problem with a razorpage. You can use your regular CSS form, you just need to play with your folder levels. This avoids having to do CSS inline.
对于任何在剃须刀页面上遇到类似问题的人。您可以使用常规 CSS 表单，您只需要使用文件夹级别即可。这避免了必须执行 CSS 内联。
Using normal HTML/CSS
body{background-image: url("images/sparks.jpg");}
My folder structure for razor
body{background-image: url("../../images/sparks.jpg");}
使用普通的 HTML/CSS
正文{背景图片：网址（“图片/火花.jpg”）；}
我的剃刀文件夹结构
正文{背景图片：网址（“../../images/sparks.jpg”）；}
回答by Piyush_sharma
I would recommend to just drag and drop the image. Visual Studio will generate the code automatically for you,
我建议只拖放图像。Visual Studio 会自动为你生成代码，
body { background-image: url('../../Content/Images/dark123.jpg'); }
body { 背景图片：url('../../Content/Images/dark123.jpg'); }
This URL code is auto-generated by Visual Studio you don't need to write the code manually.
此 URL 代码由 Visual Studio 自动生成，您无需手动编写代码。
Hope this will fix your issue.
希望这会解决您的问题。
Cheers!
干杯!
回答by Sam Tam
use below code
使用下面的代码
.background { background-image: url("../Images/backimage.jpg"); background-position: inherit; }
.background { background-image: url("../Images/backimage.jpg"); 背景位置：继承；}
回答by Mr Lister
It could be a caching issue in the browser; that is, the browser may cache an older version if the css file. Clear the cache and try again.
这可能是浏览器中的缓存问题；也就是说，如果 css 文件，浏览器可能会缓存旧版本。清除缓存并重试。
