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

我剥离了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。 Alpha数字允许您调整透明度。 1完全不透明，0完全透明。