内容占位符背景图像
本文关键字:图像 背景 占位符 | 更新日期: 2023-09-27 18:20:35
是否可以为内容占位符设置背景图像?目前,我可以显示整个页面的背景图像,但内容占位符挡住了大部分图片,所以我想为内容占位符设置背景图像(大部分内容都在占位符中)。
以下是我在后台显示图像的代码,但我不知道如何将其放置在ASP.NET中的内容占位符中:
protected void dropListActivity_SelectedIndexChanged(object sender, EventArgs e)
{
if (dropListActivity.SelectedItem.Text == "GrassHopper and Ants")
{
PageBody.Attributes.Add("style", "background:url(Images/background/ant-and-grasshopper.jpg) no-repeat;");
Session["Background"] = "background:url(Images/background/ant-and-grasshopper.jpg);";
}
if (dropListActivity.SelectedItem.Text == "Food Fit For A King")
{
PageBody.Attributes.Add("style", "background:url(Images/background/King.jpg) no-repeat;");
Session["Background"] = "background:url(Images/background/King.jpg);";
}
}
在我的html端,我只添加了一个body id="PageBody",它就完成了任务。但是我该如何在内容占位符中做到这一点呢?我是编程以及CSS或Html的新手。
内容占位符只渲染它的内容,如果它是空的,就没有渲染的html元素,你可以在里面放一个div,它就会渲染。
关于你的解决方案——你要去服务器更改背景图像,请不要
你应该使用JavaScript+CSS使用jQuery来监听select元素的更改事件,然后根据它更改背景。
in your css:
.grassHopper{background:url(Images/background/ant-and-grasshopper.jpg) no-repeat;}
.foodFit{background:url(Images/background/King.jpg) no-repeat;}
in your JS
$(document).ready(function(){
$("#dropListActivity").change(function(event){
var jqBody = $("body");
jqBody.removeClass("grassHopper foodFit");
if($(this).find("option[selected]").text() === "GrassHopper and Ants")
{
jqBody.addClass("grassHopper");
}
...
}).change();//also trigger so the bg will be updated according to the selected value at the select from the server
});
最后一件事——如果你只是从.net堆栈上开始编程——我建议使用asp.net MVC和ont-webForms