设置背景图像与ejs模板 [英] set background image with ejs template

问题描述

在博客网站上工作，这里是我想要的效果：

我使用forEach循环遍历每个帖子，并为每个帖子创建相同的样式。这是我的代码：

 <％blog.forEach（function（blog，index）{％> //循环每个帖子
 
< div class =col-md-6 col-sm-6> 
< div class =thumbnail> 
< a href =/ blog /<％= blog._id％>>< img src =<％= blog.image％>>< / a> //添加图片
< / div> 
 
< div class =caption> 
< a href =/ blog /<％= blog._id％> < h2><％= blog.title％>< / h2>< / a> //添加标题
< / div> 
 
< span> ;％= blog.created.toDateString（）;％>< / span> //添加日期
 
< div class =relative> 
< p& ;％ -  blog.body.substring（0,250）;％>< / p> //添加正文
< div class =absolute>< / div> 
& div> 
 
< / div> 
<％}}）％> 
  

结果是：

 
 <％blog.image％> 
  

如何使用此图片作为背景与标题（就像第一张图片）？是否可以传递此图像作为背景与ejs模板？

解决方案

这应该让你开始：

  .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 =stylesheet/>< div class =col-md- 6 col-sm-6> < a href =/ blog /<％= blog._id％>> < div class =wrapper> < img class =img-responsivesrc =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 necurnurn。 Praesent在est varius，rutrum massa sed，元素velit。 < / p>< / div>  

EJS专注于HTML标记和CSS。

---

这是如何工作的简要概述：

• 图像和覆盖图包装在 .wrapper 中，它设置为位置：相对; 。


• .overlay 绝对; ，它将div从正常的内容流中取出，并绝对定位在 .wrapper 。


• bottom：0; 确保它在底部， width：100％ c> .wrapper 。


• 我添加了 background：rgba（50，50，50，0.5）; 使文本更易读（值需要调整）。 rgba 代表红色，绿色，蓝色，阿尔法。 Alpha数字允许您调整透明度。 1 完全不透明， 0 完全透明。

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?

解决方案

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.

这篇关于设置背景图像与ejs模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！