set background image with ejs template

问题

Working on a blog site, Here's the effect I want : I use a forEach to loop through every post and create the same style for each post. This is my code :

<% 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>
    <% }}) %>

It results in :

I have my blog post image in

        <% blog.image %>

How can I use this image as background with title on it(just like the one in the 1st image)? Is it possible to pass this image as background with ejs template?

回答1:

This should get you started:

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

I stripped out the EJS to focus on the HTML markup and CSS.

---

A brief overview of how this works:

• The image and overlay is wrapped in .wrapper, which is set to position: relative;.
• The .overlay is set to position: absolute; which takes the div out of normal content flow and absolutely positions it inside .wrapper.
• bottom: 0; ensures it is at the bottom, and width: 100% expands it to fill .wrapper.
• I added background: rgba(50, 50, 50, 0.5); to make the text a bit more readable (values need tweaked). rgba stands for Red, Green, Blue, Alpha. The Alpha digit allows you to adjust transparency. 1 is fully opaque, 0 is fully transparent.

来源：https://stackoverflow.com/questions/41681113/set-background-image-with-ejs-template