图片作为标题覆盖闪亮的头背景

任何人都可以提供的CSS代码，允许图像是图像上的文本/标题（图像会有点透明）的Shiny应用程序标题的背景。我有这个，但不知道足够的CSS样式。图片作为标题覆盖闪亮的头背景

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

来源

2017-01-26 user3390310

显示我的HTML结构 – grinmax

试试这个...！

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>

来源

2017-01-26 05:35:44

试试这个

<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/

来源

2017-01-26 06:16:49 grinmax

试试这个（嵌入在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)

来源

2017-01-26 07:38:50

这些都是很大的。感谢大家。有没有人对Shiny CSS样式的书籍有任何建议？编辑布局时我很失落。 – user3390310

这一个工程，但我的背景只是我的标题文本（h4）的大小，我怎么能改变图像和图像的大小，以适应窗口大小？ – user3390310

'标签$头（标签$风格（ “ .title伪 { 背景：网址（ 'tps.jpg'）; 背景重复：不重复; 背景尺寸：60％，200％; } “ ）） headerPanel（H1（” 应用程序名称”，类= '标题'））， headerPanel（H1（ “应用程序名称”，风格= “颜色：白色”，IMG（SRC ='tps.jpg'，height = 200，width = 1150））），' – user3390310

图片作为标题覆盖闪亮的头背景

回答

相关问题