javascript - 使用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 完全透明。