Изображение в качестве фона главы в блестящем с наложением над заголовком

Question

Может ли кто-нибудь предоставить мне код CSS, который позволяет изображению быть фоном из заголовка Shiny App с текстом/заголовком над изображением (изображение будет несколько прозрачным). У меня есть это, но я не знаю достаточно, чтобы включить стилизацию CSS.

headerPanel(h1("App Title", style="color: white" , img(src='tps.jpg', height=200, width=1150))), 

Answer 1

Попробуйте это ...!

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 2

Попробуйте

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

CSS

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

Demo https://jsfiddle.net/6hzc54vw/

Answer 3

Попробуйте (с помощью CSS, встроенный в код R):

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)