画像タイトルオーバーレイで光沢のあるヘッド背景

Question

イメージは、画像上にテキスト/タイトル付きシャイニーアプリヘッダーの背景になるようなCSSコードを教えていただけますか？（画像はやや透明です）。私はこれを持っていますが、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を試してみてください012 https://jsfiddle.net/6hzc54vw/

Answer 3

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

デモは、この（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)