ejsテンプレートを使用して背景画像を設定する

Question

ブログサイトで働くことは、私が望む効果があります。 forEachを使用してすべての投稿をループし、各投稿ごとに同じスタイルを作成します。これは私のコードです：

<% 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テンプレートの背景として渡すことは可能ですか？

Answer 1

これは、あなたが始める必要があります。

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

私はHTMLマークアップとCSSに集中するEJSを取り除か。

---

これがどのように動作するかの概要：

• 画像とオーバーレイが.wrapperに包まれて、position: relative;に設定されています。
• はposition: absolute;に設定されています。通常のコンテンツフローから除外され、絶対的に.wrapperに配置されます。
• bottom: 0;は、それが底部にあることを保証し、width: 100%は、.wrapperを埋め込むように展開します。
• テキストを少し読みやすくするためにbackground: rgba(50, 50, 50, 0.5);を追加しました（値を調整する必要があります）。 rgbaは、赤、緑、青、アルファの略です。アルファ数字で透明度を調整できます。 1は完全に不透明であり、0は完全に透明です。