微信公众号标题功能前端实现（绝对定位方法）

最新推荐文章于 2026-01-06 19:45:54 发布

原创最新推荐文章于 2026-01-06 19:45:54 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #前端

实现结果。实现背景图标下角的内容文字功能

实现思路：一个背景图父级一个盒子包裹图片和文字。父级相对定位。文字绝对定位移动

实现代码：

<template>
    <view class="one">
        <view class="para">
           <img src="static/images/banner2.jpg" alt="" />
           <p>欢迎来到我们的公众号</p>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
     
    };
  },
  methods: {
    
  },
};
</script>

<style scoped>
 
   .para{
       width: 100%;
       height: 400rpx;
       background:yellowgreen;
       position: relative;   /* 父级的定位方式 */
   }
   img{
       width: 100%;
       height: 400rpx;
   }
   p{
       font-size: 35rpx;
       position: absolute;
       left: 20rpx;
       bottom: 10rpx;
       color: white;
   }
</style>