【问题标题】:Adding background image to Shiny NavBarPage将背景图像添加到 Shiny NavBarPage
【发布时间】:2016-03-08 08:38:34
【问题描述】:

我正在尝试将背景图片添加到闪亮的应用程序。我需要把它固定在左上角。到目前为止,背景图像尚未加载。颜色正在加载,字体看起来很好。只是没有图像。

这是我的 CSS:

body {
  background-image: url("header.png");
  background-position: left top;
  background : #000000; 
}

这是我将它包含在我的 Shiny 中的地方:

ui = navbarPage(
  includeCSS("includes/style.css"),

提前感谢您的帮助。

【问题讨论】:

  • 您确定要背景图片吗?您是否愿意将其作为图像直接放入页面(带有替代文本、可链接、所有爵士乐),因为闪亮的千篇一律的入门套装非常可定制。

标签: css r shiny


【解决方案1】:

如果您想添加图像(或自定义任何真正闪亮的布局),有两种方法可以做到。第一种只是通过 tags 对象编写自己的 html,其中包含重现页面所需的所有功能

另一种(坦率地说更简单的方法)是对现有功能进行小幅修改。在 ui 方面,闪亮的标签只是列表,您可以访问、添加或替换其中任何您喜欢的附加标签。

首先,您需要保存生成的闪亮对象

所以,而不是:

ui.R

library(shiny)
navbarPage(title = 'test')

我们这样做:

ui.R

library(shiny)
FullPage <- navbarPage(title = 'test')
FullPage

一旦你有了FullPage 对象,你就可以修改任何你想要的东西。每个级别要么是闪亮标签对象的列表,要么是闪亮标签对象本身。

一个闪亮的标签对象有三个槽,

  • name(如果标签是针对 img 的,则为 'img')
  • attribs (这可以是 css 的类,img 的 src,或任何新的 您可以创建的属性)
  • children(任何嵌套在这个 标记)

所以,为了在左上角添加图像,标题当前位于导航栏页面中,我将执行以下操作:

ui.R

FullPage <- navbarPage('test')
FullPage[[3]][[1]]$children[[1]]$children[[1]]$children[[1]] <- 
                    tags$img(src = 'logo.png', width = 60, height = 60)
FullPage

这里正在做什么?

好吧,navbarPage 会生成一个包含 3 个闪亮对象的列表,

前 2 个包含(我相信)头部,第三个包含页面的主体。

这本身就是一个闪亮对象的列表,第一个包含标题部分。反过来,第一个孩子的第一个孩子是标题标签,因此我们将其替换为 tags$img 对象。我们可以用任何东西代替它。

例如tags$a(href = 'http://mynewlinklocation', tags$img(src = 'logo.png')) 用于可点击的图像。

如果对您的页面进行任何其他自定义修改,我建议您在控制台中使用该对象。

【讨论】:

  • 这是一个很好的答案!
【解决方案2】:

你应该使用 background-color 而不是 background

body {
  background-image: url("header.png");
  background-position: left top;
  background-color : #000000; 
}

Background 是一个简写,它将所有省略的值设置为其各自的默认值,对于 background-image 为“none”。

如果你想使用速记,它看起来像这样:

body {
  background: #000 url("header.png") left top;
}

【讨论】:

    【解决方案3】:

    如果图像位于项目的 www 文件夹中,请在 ui.R 文件中使用以下代码-

     tags$style(
    HTML(
    paste0(
    "body{
          background: url('./(Image-name.extension)') no-repeat center center fixed;
    
         }"
        )))
    

    【讨论】:

      猜你喜欢
      • 2016-07-13
      • 2015-11-06
      • 2012-04-09
      • 2011-06-01
      • 2017-01-14
      • 2013-12-16
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多