如何为Shiny应用的单个指定标签页设置专属背景图片

你之前的代码是将背景样式绑定到了全局body元素上，而body是整个Shiny应用的根节点，所以无论切换到哪个标签页，背景都会全局生效，这是问题的核心原因。

你可以通过给Overview标签的专属容器绑定背景样式的方式实现需求，修改后的完整代码如下：

library(shiny)

ui <- navbarPage(
    "Old Faithful Geyser Data",
    # 全局样式统一写在head中
    tags$head(
        tags$style(HTML("
        /* 调整标签内容区域的默认边距和高度，适配背景图铺满需求 */
        .tab-content {
            padding: 0;
            height: calc(100vh - 50px);
        }
        /* 仅给Overview标签的容器设置背景图 */
        .overview-container {
            width: 100%;
            height: 100%;
            background: url('https://www.fillmurray.com/1920/1080') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            margin: 0;
            padding: 20px; /* 按需调整内容内边距 */
        }
        /* 其他标签页恢复默认白色背景与内边距 */
        .model-container {
            background: #fff;
            padding: 15px;
            height: 100%;
        }
        "))
    ),
    tabPanel(
        "Overview",
        mainPanel(
            width = 12, # 占满全宽
            class = "overview-container",
            # 此处放Overview标签的原有内容
            h2("概览页面内容")
        )
    ),    
    tabPanel("Model",
             mainPanel(
                 width = 12,
                 class = "model-container",
                 sidebarLayout(
                     sidebarPanel(
                         sliderInput("bins",
                                     "Number of bins:",
                                     min = 1,
                                     max = 50,
                                     value = 30)
                     ),
                     mainPanel(
                         plotOutput("distPlot")
                     )
                 )
             )
    )
)

server <- function(input, output) {
    output$distPlot <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

shinyApp(ui = ui, server = server)

修改说明 #

• 将原写在Overview标签内的样式移到了全局tags$head中，避免样式重复加载
• 给Overview标签的mainPanel添加了专属类名overview-container，背景样式仅作用于该类，不会影响其他标签
• 给Model标签的外层容器添加了model-container类，设置默认白色背景，完全覆盖底层区域，不会透出背景图
• 调整了标签内容区域的高度计算，确保背景图可以铺满除导航栏外的全部可视区域

内容的提问来源于stack exchange，提问作者jnordeman