有没有办法自动为图像添加渐变？答案

【问题标题】：Is there a way to auto add gradient to images?有没有办法自动为图像添加渐变？
【发布时间】：2020-07-11 19:08:28
【问题描述】：

这是我的代码：

<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 尺寸，如果不能，您能否建议我其他选择，谢谢。

【问题讨论】：

看来水印不只是渐变
在我看来实际上是相同的图像，但不透明度降低了
那里“渐变”的目的是什么？
渐变只是我实现这种效果的方法之一，但现在我认为这是不可能的
我认为使用同一图像的高度放大版本（如上）将是实现它的最佳方法。透明颜色和渐变在这里无济于事。

标签： javascript html css

【解决方案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() 的值，以达到接近您要求的输出。

参考资料：

【讨论】：

【解决方案2】：

你描述的效果其实是可以实现的。您只需要在图像顶部堆叠尺寸较小的相同图像。然后可以模糊下方的图像，它将跨越400px x 400px 区域的其余部分。

为此，您需要将封闭的div 的position 字段设置为relative，并将两个图像的absolute 字段设置为。我已将顶部图像的高度降低到200px，并保持图像宽度与下面的图像相同，以类似于问题中图像的样式。使用filter: blur() 模糊较大的图像。模糊会柔化图像的边缘（删除clip 属性，您就会知道）。使用clip 属性使边缘看起来“清晰”。

我使用了this 图像。运行下面的代码 sn-p 以查看它的实际效果：

<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
    margin: auto;
    position: relative;
    width: 50%;
}
.outer {
    filter: blur(5px);
    position: absolute;
    z-index: -1;
    clip: rect(0,400px,400px,0);
    
}
.inner {
    position: absolute;
    top: 100px; 
}
</style>
<div class="container">
    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
    <img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>

这回答了您的部分问题。现在，要根据尺寸自动放置图像，您可以使用 JavaScript 检索和更新图像尺寸：

var image = new Image();

image.onload = function() {
  var height = image.height;
  var width = image.width;

}

image.src = "<source>";

下面的图片永远是400 x 400 px，如果上面图片小于400 x 400 px，你可以根据实际检索到的尺寸来更新上面图片的属性。否则，将其压缩到 400 x 400 px 以覆盖下面的整个图像。

【讨论】：