設置背景圖像與ejs模板

在博客網站上工作，這裏是我想要的效果：我使用forEach來遍歷每個帖子併爲每個帖子創建相同的樣式。這是我的代碼：設置背景圖像與ejs模板

<% blog.forEach(function(blog,index) { %> //loops through every post 

     <div class="col-md-6 col-sm-6"> 
      <div class="thumbnail"> 
      <a href="/blog/<%= blog._id %>"><img src="<%= blog.image %>"> </a> //adds image 
      </div> 

      <div class="caption"> 
       <a href="/blog/<%= blog._id %>"><h2><%= blog.title %></h2> </a> //adds title 
      </div> 

      <span><%= blog.created.toDateString(); %></span> //adds date 

      <div class="relative"> 
      <p><%- blog.body.substring(0,250); %></p> //adds body 
      <div class="absolute"></div> 
      </div> 

     </div> 
    <% }}) %>

它導致：

我在

 <% blog.image %>

我如何可以使用此圖片作爲背景，標題我的博客文章圖片它（就像第一張圖片中的那個一樣）？是否有可能將此圖像作爲背景與ejs模板一起傳遞？

來源

2017-01-16 eknoor4197

這應該讓你開始：

.wrapper { 
 
    position: relative; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    background: rgba(50, 50, 50, 0.5); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-6 col-sm-6"> 
 
    <a href="/blog/<%= blog._id %>"> 
 
    <div class="wrapper"> 
 
     <img class="img-responsive" src="http://pipsum.com/800x300.jpg"> 
 

 
     <div class="overlay"> 
 
     <a href="/blog/<%= blog._id %>"><h2> blog.title </h2> </a> 
 
     <span>blog.created.toDateString();</span> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie commodo quam, in dapibus odio laoreet sed. Duis id mauris in ligula lacinia bibendum non nec urna. Praesent at est varius, rutrum massa sed, elementum velit. 
 
    </p> 
 

 
</div>

我剝出EJS專注於HTML標記和CSS。

是如何工作的簡要概述：

的圖像和覆蓋被包裹在.wrapper，它被設置爲position: relative;。
.overlay設置爲position: absolute;，它將div從正常內容流中取出，並將其絕對地放在.wrapper之內。
bottom: 0;確保它位於底部，width: 100%將其擴大以填充.wrapper。
我加了background: rgba(50, 50, 50, 0.5);使文本更具可讀性（值需要調整）。 rgba代表紅色，綠色，藍色，阿爾法。 Alpha數字可讓您調整透明度。 1是完全不透明的，0是完全透明的。

來源

2017-01-20 18:17:55 RyanZim

設置背景圖像與ejs模板

回答

相關問題