微信小程序布局图片上面显示文字-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序布局图片上面显示文字。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

实现的效果

一、xml布局文件

二、css文件

三、留个脚印吧

微信小程序文章推荐

微信小程序布局图片上面显示文字_小程序图片上面显示文字怎么操作_Android毕业设计源码的博客-CSDN博客

微信小程序绘制线路以及marker轨迹移动_微信小程序地图画路线_Android毕业设计源码的博客-CSDN博客微信小程序实现左边图片右边文字效果_微信小程序图片文字左右布局_Android毕业设计源码的博客-CSDN博客

微信小程序获取当前日期和时间_微信小程序获取当前时间_Android毕业设计源码的博客-CSDN博客

微信小程序之获取定位数据以及通过坐标获取详细地址数据_定位小程序源码_Android毕业设计源码的博客-CSDN博客微信小程序绘制地图轨迹线路_微信小程序polyline_Android毕业设计源码的博客-CSDN博客

微信小程序绘制marker_Android毕业设计源码的博客-CSDN博客

微信小程序之绘制多个marker以及调用手机地图软件导航_Android毕业设计源码的博客-CSDN博客

实现的效果一

微信小程序布局图片上面显示文字

说明：文字显示在图片上面

1、xml布局文件

<view class="image-parent">
<image class='image' mode='widthFix' src='../../images/answer-ad.png'></image>
<view class="child">child</view>
</view>

2、css文件

.image-parent {
height: 746rpx;
position: relative;
border: 2rpx solid red;
}

.child {
width: 100px;
height: 24px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
background: yellowgreen;
}

实现的效果二

微信小程序布局图片上面显示文字

说明：这个是文字在图片上，以及水平垂直居中

1、xml布局文件

<view class="parentCss">

  <image src="../image/img640.jpg" style="width: 80%;height:280rpx;border-radius: 10rpx;"></image>

  <view class="childCss">

    <view>我是图片上的居中文字</view>

  </view>

</view>

2、css文件

.parentCss {

  display: flex;

  flex-direction: row;

  justify-content: center;

  margin-top: 100rpx;

  position: relative;

}

.childCss {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  color: #fff;

  font-weight: bold;

}