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"))),

它会过滤第二张图片。

任何人都知道为什么？

Answer 1

这是与CSS相关的问题，问题并非针对 R 或闪亮。示例脚本中的问题是filter转换适用于每个子项（但不适用于其中定义的body）。流行的解决方案专注于using overlays，它的工作原理是为背景和内容定义不同的CSS类，并为每个类定义单独的HTML元素。另一种达到预期效果的方法是使用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）的内置浏览器需要这样做。

设置灰度背景图像 - 闪亮R.

1 个答案: