内容占位符背景图片答案

【问题标题】：Content place holder background image内容占位符背景图片
【发布时间】：2013-07-01 07:19:22
【问题描述】：

可以为内容占位符设置背景图片吗？目前，我可以为整个页面显示背景图片，但内容占位符挡住了大部分图片，所以我想为内容占位符设置背景图片（大部分内容都在持有人中） .

这是我在背景中显示图像的代码，但我不知道如何将其放置在 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 的新手。

【问题讨论】：

标签： c# asp.net css background contentplaceholder

【解决方案1】：

内容占位符只渲染它的内容，如果为空则不渲染html元素，你可以在里面放一个div，它就会渲染。

关于您的解决方案 - 您要去服务器更改背景图片，请不要。
你应该用 JavaScript + CSS 来做使用jQuery监听select元素的change事件，然后根据它改变背景。

 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

【讨论】：