Question

任何人都可以向我提供CSS代码，该代码允许图像成为Shiny App标题的背景，图像上有文本/标题（图像会有些透明）。我有这个，但不知道纳入CSS样式。

In [11]: %timeit df ** 2
10000 loops, best of 3: 95.9 µs per loop

In [13]: %timeit np.square(df)
10000 loops, best of 3: 85 µs per loop

In [15]: %timeit np.power(df, 2)
10000 loops, best of 3: 85.6 µs per loop

Answer 1

试试这个

<div class="container">
  <h1>Title</h1>
</div>

CSS

.container {
  background-image: url(http://grinmax.ru/img/ht5.png);
  background-repeat: no-repeat;
  padding: 20px;
}

演示https://jsfiddle.net/6hzc54vw/

Answer 2

试试这个......！

CSS：

 header {       
   animation:zoom 10s 1 ease-out;
   background-size: cover;
   animation-fill-mode: forwards;
   background-image: url("https://www.nasa.gov/sites/default/files/thumbnails/image/abi_north_america_med_res_jan_15_2017_0.jpg");
   filter:grayscale(30%);
   height:100%;
}
header{
   display:flex;
   flex-direction:column;
   display:flex;
   text-align:center;
   flex-direction:column;
   justify-content:center;
   align-items:center;
}

HTML：

<header>
<h1 class="start0"><b>Welcome</b></h1>

<h1 class="start1"> <b>To Alive</b></h1>
    </div>  
</header>

Answer 3

试试这个（在R代码中嵌入CSS）：

library(shiny)

ui <- fluidPage(

    tags$head(
        tags$style(
            "
            .title 
            {
                background:url('http://images.clipartpanda.com/smiley-face-png-Smiley_Face.png');
                background-repeat: no-repeat;
                background-size: 5% 90%;
            }
            "
        )
    ),

    headerPanel(
        h1("App Title", class = "title")

    ),


    sidebarLayout(
        sidebarPanel("Sidebar panel"),
        mainPanel("Main panel")
    )
)

server <- function(input, output){

}

shinyApp(ui, server)

作为头部背景的图象在发光与标题覆盖物

3 个答案: