Html 身体上的动态背景图像 (ASP.NET)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5066031/
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
Dynamic background-image on body (ASP.NET)
提问by Lars Holdgaard
I have a situation where I have ~10-20 different background images in a folder. When my site loads I need to choose a specific one of these images based upon some values from the database.
我有一种情况，我在一个文件夹中有大约 10-20 个不同的背景图像。当我的网站加载时，我需要根据数据库中的某些值选择这些图像中的特定图像。
I thought about using runat=serveron the body tag, and then adding the attributes dynamically on page_load, but everywhere I have read that suggestion people say it is a really bad idea... Also, I tried it, and it didn't work (however didn't debug it too much).
我想过在 body 标签上使用runat=server，然后在 page_load 上动态添加属性，但我读过的每个地方都有人说这是一个非常糟糕的主意......另外，我试过了，但没有工作（但是没有调试太多）。
How would one do this "the right way" ? :-)
如何以“正确的方式”做到这一点？:-)
采纳答案by Jon P
You Can Either dynamically add it via a Generic HTML control:
您可以通过通用 HTML 控件动态添加它：
using System.Web.UI.HtmlControls;
protected override void OnInit(EventArgs e)
{
// Define an Literal control.
HtmlGenericControl css = new HtmlGenericControl();
css.TagName = "style";
css.Attributes.Add("type", "text/css");
string imageURL = string.Empty;
//Logic to determin imageURL goes here
//Update Tag
css.InnerHtml = @"body{background-image: url(" + imageURL + ");}";
// Add the Tag to the Head section of the page.
Page.Header.Controls.Add(css);
base.OnInit(e); }
The other option is to have a publically exposed property from the code-behind
另一种选择是从代码隐藏中公开公开的属性
E.g.
例如
public string backgroundImage = "defaultImage.png";
Update this in page init or onload events.
在页面初始化或加载事件中更新它。
And reference it in the aspx file either in the head:
并在头部的 aspx 文件中引用它：
<style type="text/css">
body
{
background-image:url(<%=backgroundImage%>);
}
</style>
or as an attribute of the body tag
或者作为 body 标签的一个属性
<body style="background-image: url(<%= backgroundImage %>)">
Either of these should be able to help you out.
这些中的任何一个都应该能够帮助你。
回答by Meligy
One way you can do it is have a property like this (a method will also work):
一种方法是拥有这样的属性（一种方法也可以）：
protected string BodyBackgroundImageUrl
{
get
{
// I just chose random pic
return "http://www.google.com/images/logos/ps_logo2.png";
}
}
You don't have to set the value like this, you can fill it later from page Initevent.
您不必像这样设置值，您可以稍后从页面Init事件中填充它。
Then in the body you can do something like:
然后在身体中，您可以执行以下操作：
<body style='background:url(<%= BodyBackgroundImageUrl %>) no-repeat;'>
The no-repeat is just to show you can write whatever you want all around.
不重复只是为了表明你可以随心所欲地写任何东西。
Of course you can even have more control, and different ways of things:
当然，您甚至可以拥有更多控制权和不同的处理方式：
public string GetBodyStyle()
{
// Get the picture somehow dynamically
string bodyBackgroundImageUrl = GetBodyBackgroundImageUrl();
// You can use StringBuilder or so, not the main point
var styles = "";
styles += string.Format("background:url({0}) no-repeat;", bodyBackgroundImageUrl);
// ... Add some extra styles if you want ...
return styles;
}
And then your Body tag will look like:
然后您的 Body 标签将如下所示：
<body style='<%= GetBodyStyle() %>'>
...
...
Also, you can always use a hidden field that you assign the value from the page, and then in browser set the background URL to that hidden field by JavaScript.
此外，您始终可以使用从页面分配值的隐藏字段，然后在浏览器中通过 JavaScript 将后台 URL 设置为该隐藏字段。
Example (using jQuery, but you don't have to) :
示例（使用 jQuery，但您不必）：
$(function() {
// ASP.NET will fill the ID, then # with ID will show to JS as one JS string
var myHiddenField = $('#<%= myServerSideHiddenField.ClientID %>');
var bodyBackground = "url(" + myHiddenField.val() + ")";
document.body.css("background" , bodyBackground);
});
回答by Picflight
This is how we have been doing it.
这就是我们一直在这样做的方式。
<body runat="server" id="PageBody">
code behind
背后的代码
PageBody.Style.Add("background-color", "" + returncolor + "");
回答by Dave
I am using a master page, and taking hints and tips from a few suggestions, I have come up with this as the best, and fullest, solution so far:
我正在使用母版页，并从一些建议中获取提示和技巧，我认为这是迄今为止最好、最完整的解决方案：
Please add this Using:
请添加此使用：
using System.Web.UI.HtmlControls;
Inside the MasterPage:
在母版页内：
<body runat="server" id="masterPageBody">
In any code-behind page function (for example, "Page_Load"):
在任何代码隐藏页面函数中（例如，“Page_Load”）：
HtmlControl masterPageBody =(HtmlControl)Master.FindControl("masterPageBody");
masterPageBody.Style.Remove("background-image");
masterPageBody.Style.Add("background-image", "/images/blah.jpg");
回答by user1994891
serverPath = Request.PhysicalApplicationPath;
string chosenMap = dropdownlistMap.SelectedItem.Text;
Bitmap bm = new Bitmap(serverPath + chosenMap);
int imageWidth = bm.Width;
int imageHeight = bm.Height;
bm.Dispose();
FileInfo fi = new FileInfo(chosenMap);
string imageSrc = "~/" + fi.Name;
imgPanel.BackImageUrl = imageSrc;
imgPanel.Width = imageWidth + 4;
imgPanel.Height = imageHeight + 4;
imgPanel.BorderColor = Color.Yellow;
imgPanel.BorderStyle = BorderStyle.Groove;
imgPanel.BorderWidth = 2;
回答by Todd
Seriously -- this doesn't have to be this hard. I just implemented this for something I am designing... I realize this thread is probably dead but hey -- I came up with a better solution IMO.
说真的 - 这不必那么难。我刚刚为我正在设计的东西实现了这个......我意识到这个线程可能已经死了但是嘿 - 我想出了一个更好的解决方案 IMO。
ASPX VB:
ASPX VB：
ClientScript.RegisterStartupScript(Me.[GetType](), "Background",
"document.body.style.backgroundImage = " & Chr(34) &
"url('128-700.jpg')" & Chr(34) & ";", True)
That's it... I call it straight from the VB code part. I'm still learning but I know that after searching around and trying different things -- this was as straight forward as possible.
就是这样...我直接从 VB 代码部分调用它。我仍在学习，但我知道在四处搜索并尝试不同的事情之后 - 这尽可能直接。
The trick is -- this code utilizes a call for Java to change the background versus modifying the CSS.
诀窍是——这段代码利用对 Java 的调用来更改背景而不是修改 CSS。
