这是我的代码：<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 尺寸是否可以实现，如果不能，您能否建议我其他选择，谢谢。
2 回答
有只小跳蛙
TA贡献1824条经验 获得超8个赞
你可以用 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()来实现接近您要求的输出。
湖上湖
TA贡献2003条经验 获得超2个赞
你描述的效果其实是可以实现的。您只需要在图像顶部堆叠尺寸较小的相同图像。然后可以模糊下面的图像，它将跨越该400px x 400px区域的其余部分。
为此，您需要将position封闭的字段设置div为 ，relative并将两个图像的字段设置为absolute。我已将位于顶部的图像的高度降低到200px并保持图像宽度与下面的图像相同，以类似于问题中图像的样式。用于filter: blur()模糊较大的图像。模糊会柔化图像的边缘（删除该clip属性，您就会知道）。使用该clip属性使边缘看起来“清晰”。
我用过这张图片。运行下面的代码片段以查看它的实际效果：
<!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以覆盖下面的整个图像。
添加回答
举报
0/150
提交
取消