Html 如何在asp.net MVC中应用完整的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32222608/
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
How to apply full background image in asp.net MVC
提问by JADE
I'm new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full background image. Help please..
我是 asp.net MVC 的新手，我需要在登录页面上有一个完整的背景图像。我对所有的 cshtml 感到困惑，并且迷失在设置完整背景图像的位置。请帮忙..
回答by Marcin
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
我认为最好的解决方案是通过样式表 (css) 做到这一点。所有样式都应该在一个单独的 css 文件中。对于漂亮的代码，不要使用内联样式：
body {
background-image: url('your_img_path');
margin: 0;
}
回答by Syed Asim Ashiq
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes. To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background'attribute. I have provided the sample code. Have a Look.
首先，我想说，出于所有设计目的，将“.cshtml”视为“.html”。要在视图中添加背景图像（Asp.net MVC 中的 .cshtml 页面），您只需将其添加到<body>标记中作为“背景”属性。我已经提供了示例代码。看一看。
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>
</head>
<body background="~/Content/Images/sahb.png">
</body>
</html>
Regards! SAHB
问候！安全局
回答by Developer
In case if you want change background in a particular Viewjust add thise code
如果您想在特定视图中更改背景，只需添加此代码
@section head{
<style type="text/css">
body {
background-image: url('/Images/paper.jpg');
margin: 0;
}
</style>
}
But dont forget in Layoutof this Viewadd following line
但是不要忘记在此视图的布局中添加以下行
<head>
@RenderSection("head", required: false)
</head>
回答by Sam Patirage
If you want it on all pages use Shared/_Layout.cshtml file and change body tag similar to
如果您希望在所有页面上使用 Shared/_Layout.cshtml 文件并更改类似于
Probably I would put only on the Home/Index.cshtml page so it appears only on the home page
To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows
<body id="HomepageBody" >and change it in the Content/site.css file add
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
可能我只会放在 Home/Index.cshtml 页面上，所以它只出现在主页上 为了避免在其他页面上重复，我会在 Shared/Index.chtml 文件中添加一个 ID 到主页，如下所示
<body id="HomepageBody" >，并将其更改为在 Content/site.css 文件中添加
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
That would make it work across popular browsers like Chrome.
这将使它在 Chrome 等流行浏览器上工作。
回答by Sharunas Bielskis
In Index.cshtml:
在 Index.cshtml 中：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body
</body>
</html>
in Main.css:
在 Main.css 中：
body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
