將背景圖像添加到Shiny NavBarPage

我正在嘗試將背景圖像添加到Shiny App。我需要將它固定在左上角。到目前爲止，背景圖片未加載。顏色正在加載，字體看起來很好。只是沒有圖像。將背景圖像添加到Shiny NavBarPage

這是我的CSS：

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

和這裏是我包括在我的閃亮：提前爲幫助

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

感謝。

來源

2016-03-08 Joel

你確定你想要一個背景圖片嗎？您是否願意直接將它作爲圖像（使用alt-text，linkable，所有爵士樂）直接放入頁面中，因爲cookie cutter starter-set是明顯可定製的。 – Shape

如果你想（在一個閃亮的佈局真的或定製任何東西）添加圖像有兩種方法可以做到這一點。第一種方法是通過標籤對象來編寫自己的html文件，其中包含所有需要重現頁面的功能

另一種（和坦率地說更簡單的方法）是對現有函數進行小小的修改。在用戶端，閃亮標籤只是列表，您可以訪問，添加或替換您喜歡的任何其他標籤。

要開始，你需要的不是以保存生成的閃亮物體

所以，：

ui.R

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

我們這樣來做：

UI。 R

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

一旦你擁有了那個FullPage對象，你可以修改任何你想要的。每個級別都是閃亮的標籤對象列表，或者閃亮的標籤對象本身。

光澤標籤對象有三個槽，

name（如果該標記是一個img，這將是 'IMG'）
attribs （這可能是CSS類，或Src在IMG，或任何新的屬性，您可以創建）
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'))爲可點擊的圖像。

對於您的頁面的任何其他自定義修改，我建議您在控制檯中使用該對象。

來源

2016-03-08 09:38:23 Shape

這是一個很好的答案！ –

您應該使用背景顏色而不是背景。

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

背景是一個速記，這將所有的省略的值設置到它們各自的缺省值，它是「無」爲背景圖像。

如果你想使用簡寫，它應該是這樣的：

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

來源

2016-03-08 08:59:22 Aember

將背景圖像添加到Shiny NavBarPage

回答

相關問題