javascript - 有没有办法自动为图像添加渐变？

Question

这是我的代码:

<div class='my-posts-container' id='<%=postobj._id%>'>
        <%var menuid='menu'+postobj._id%>
        <%var imagesource='../'+postobj.blob.path%>
        <div class="my-posts-container-header">
             <%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%> 
        </div>
        <div class="menu hide" id="<%=menuid%>" >
            <ul >
                <li><button onclick="viewpost('<%=postobj._id%>')"  >view</button></li>
                <li><button onclick="removepost('<%=postobj._id%>')"  >remove</button></li>
                <!-- <li><button onclick="copypostlink('<%=postobj._id%>')"  >copy link</button></li>
                <li><button onclick="editthispost('<%=postobj._id%>')"  >edit</button></li> -->
            </ul>
        </div>
        <div class="post-image" >
            
                <img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
    
        </div>
       
        <span>
            <%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
        </span>
        <hr>
        <div class="caption"> 
            <%=postobj.caption%> 
        </div>
        

我想将图片大小保持为 400px *400px但添加背景色 .post_image div，基本上，我想根据图像标签中的任何图像向背景添加渐变，就像这样，

这样可以覆盖整个 400 X 400 尺寸，如果不能，您能否建议我其他选择，谢谢。

Answer 1

你可以用 CSS 实现类似的东西

考虑使用这个样式表

<style type="text/css">
  .blured {
    width:320px;
    height:320px;
    position: relative;
    overflow: hidden;
  }

  .blured .blur {
    height:70px;
    width:100%;
    position:absolute;
    filter: blur(7px);
  }

  .blured .top {
    top:0px;
    background: linear-gradient(#000000d9, #00000000)
  }

  .blured .bottom {
    bottom:0px;
    background: linear-gradient(#00000000, #000000d9)
  }
</style>

然后使用下面的标记

<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
  <div class='blur top'></div>
  <div class='blur bottom'></div>
</div>

结果会是这样的:

您可以尝试使用 linear-gradient 颜色和 blur() 的值来获得接近您要求的输出。

引用资料:

• filter:blur()
• background: linear-gradient