我有一个情况,我在一个文件夹中有大约10-20个不同的背景图片。当我的网站加载时,我需要根据数据库中的一些值选择其中一个特定的图像。
我考虑在 body 标签上使用 runat=server,然后在页面加载时动态添加属性,但是无论我在哪里读到这个建议,人们都说这是一个非常糟糕的想法…… 而且,我尝试了一下,它并没有起作用(但是我没有进行太多调试)。
如何以“正确的方式”实现这一点呢?:-)
我有一个情况,我在一个文件夹中有大约10-20个不同的背景图片。当我的网站加载时,我需要根据数据库中的一些值选择其中一个特定的图像。
我考虑在 body 标签上使用 runat=server,然后在页面加载时动态添加属性,但是无论我在哪里读到这个建议,人们都说这是一个非常糟糕的想法…… 而且,我尝试了一下,它并没有起作用(但是我没有进行太多调试)。
如何以“正确的方式”实现这一点呢?:-)
你可以通过通用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); }
另外一种选择是从后端代码暴露一个公共属性。
例如:
public string backgroundImage = "defaultImage.png";
在页面初始化或onload事件中更新此内容。
并且在aspx文件中引用它,可以放在标签中:
<style type="text/css">
body
{
background-image:url(<%=backgroundImage%>);
}
</style>
或者作为 body 标签的属性。 <body style="background-image: url(<%= backgroundImage %>)">
以下两者都能帮到你。
protected string BodyBackgroundImageUrl
{
get
{
// I just chose random pic
return "http://www.google.com/images/logos/ps_logo2.png";
}
}
您不必像这样设置值,可以稍后从页面的Init
事件中填充它。
然后在正文中,您可以执行以下操作:
<body style='background:url(<%= BodyBackgroundImageUrl %>) no-repeat;'>
no-repeat只是为了展示你可以在周围写任何想要的内容。
当然,你甚至可以拥有更多的控制权和不同的方式:
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;
}
然后你的Body标签将如下所示:
<body style='<%= GetBodyStyle() %>'>
此外,您可以始终使用一个隐藏字段,将其值从页面分配,并通过JavaScript在浏览器中将背景URL设置为该隐藏字段。
示例(使用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);
});
<body runat="server" id="PageBody">
PageBody.Style.Add("background-color", "" + returncolor + "");
using System.Web.UI.HtmlControls;
<body runat="server" id="masterPageBody">
HtmlControl masterPageBody =(HtmlControl)Master.FindControl("masterPageBody");
masterPageBody.Style.Remove("background-image");
masterPageBody.Style.Add("background-image", "/images/blah.jpg");
ClientScript.RegisterStartupScript(Me.[GetType](), "Background",
"document.body.style.backgroundImage = " & Chr(34) &
"url('128-700.jpg')" & Chr(34) & ";", True)
就是这样...我直接从VB代码部分调用它。我还在学习,但我知道,在搜索和尝试不同的方法之后,这是尽可能直接的。
诀窍在于--这段代码利用了调用Java来改变背景而不是修改CSS。
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;
body
添加一个style="background-image: url()"
(或CSS类似的东西)听起来是一个不错的解决方案。有什么理由反对它吗? - Pekka