功能需求-前端在合同页面显示图片印章

WCF向光而行

已于 2023-07-25 09:26:40 修改

阅读量579

点赞数

CC 4.0 BY-SA版权

分类专栏：项目开发文章标签：前端

于 2023-07-07 15:40:17 首次发布

7 篇文章

订阅专栏

文章介绍了如何通过CSS的绝对定位属性`position`在项目中的合同页面上实现一个配置好的图片印章。核心代码包括设置父元素相对定位及印章图片的绝对定位。作者分享了自己从不懂CSS定位到学习并解决问题的过程，强调了提问、沟通和有效利用资源（如搜索引擎）的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述

需要在项目中的合同页面的指定位置显示一个配置好的图片印章，实现好的效果，如下：
在这里插入图片描述

使用使用CSS的绝对定位position来实现，代码如下：

<div id="FatherBuyer">
        <img :src="signImageSrc" id="signImageSrc" v-if="this.signFlag == 1"/>
        <span>买方（签字/盖章）：</span>

#FatherBuyer{
  position: relative;
}
#signImageSrc{
  position: absolute;
  width: 160px;
  height: 160px;
}

这是实现的核心代码。

我当下对前端的知识了解的很少且很浅，在接收到需求的时候，我不知道前端的CSS的绝对定位position，通过与同事交流、社区提问，然后再查找CSS绝对定位position的资料，整个过程我感受到学会提问，把自己的需求准确的表达出来和掌握查找资料工具的重要性，查找资料工具有如：搜索引擎、GPT等。

position属性详解：https://blog.youkuaiyun.com/weixin_46163658/article/details/121765058