グレースケール背景画像を設定する - シャイニーR

Question

は私のR ShinyAppの背景画像にグレースケールフィルタを適用するために、このコードを使用しようとしました：

ui <- fluidPage(
    tags$style("body {background: url(http://www.katamon.co.il/pics/2014-15/game19Herzeliya/ARL_1787.jpg) no-repeat center center fixed; 
       background-size: cover; 
       filter:grayscale(100%);}"), 

    headerPanel(fluidRow(column(5,tags$h1(tags$strong("Injury Prevention Data Analysis"), 
           style = "font family:Lobster,cursive; 
             color:white;background-color:black; 
             text-align:center;")))), 

    fluidRow(
    column(3,offset = 9, 
      tags$img(src = "http://www.katamon.co.il/images/logo2015T.png", 
        height = 200,width = 230, align = "right"))), 

を何が起こることはそれだけで第2の画像をフィルタリングすることです。

どのような身体がその理由を知っていますか？

Answer 1

これはCSS関連の問題です。この問題は、またはshinyに固有の問題ではありません。あなたのサンプルスクリプトの問題は、変換がすべてのの子に適用されています（ただし、定義されているbodyには適用されません）。人気のあるソリューションは、背景とコンテンツ用に異なるCSSクラスを定義し、それぞれに個別のHTML要素を定義することによって機能するusing overlaysに重点を置いています。所望の効果を達成するための別の方法CSS pseudo-elementsを使用することです。

library(shiny) 

ui <- shinyUI(fluidPage(
    tags$head(
    tags$style(paste0(
     "body:before { ", 
     " content: ''; ", 
     " height: 100%; width: 100%; ", 
     " position: fixed; ", 
     " z-index: -1; ", 
     " background: url(http://www.katamon.co.il/pics/2014-15/game19Herzeliya/ARL_1787.jpg) no-repeat center center fixed; ", 
     " background-size: cover; ", 
     " filter: grayscale(100%); ", 
     " -webkit-filter: grayscale(100%); }"))), 
    headerPanel(fluidRow(column(5, tags$h1(
    tags$strong("Injury Prevention Data Analysis"), 
    style = "font family:Lobster,cursive;color:white;background-color:black;text-align:center;")))), 
    fluidRow(column(3, offset = 9, 
    tags$img(src = "http://www.katamon.co.il/images/logo2015T.png", 
     height = 200,width = 230, align = "right"))) 
)) 

server <- shinyServer(function(input, output) { 
}) 

shinyApp(ui = ui, server = server) 

注-webkit-filterライン：それは近代たブラウザ上で重複しているものの、ビルトインRStudioの私の現在のインストール（v0.99.903）のブラウザがこれを必要とし働く