当前位置：网站首页 > IT知识 > 正文

小程序实现图片上显示文字，半透明的效果，浮动在图片上

liuian 2025-01-20 14:45 38 浏览

1.使用场景：

在公司做的小程序，主要是提供线上购物使用。在购物车列表上，有这样一个场景，即当客人把衣服加购后一段时间，该衣服可能库存紧缺或是下架了，这时，我们需要在购物车项中，告诉客人该衣服已经下架，而不是让他下单结算时，才发现缺货。

因此，我需要做一个功能，在购物车上显示缺货样式。比如象如下界面：

如果通过自己对小程序WXML及CSS的了解和网上查阅的一些资料，最终实现了这样的效果：

现在，我们来说明一下过程：

第一步，我们来做WXML：

</view>

其实我们可以把view想象成html里的div，这样比较好理解盒子的概念。

第一行，我们定义一个盒子，如果是缺货时，就显示这个盒子（而不显示正常的盒子）;

第二行，我们显示图片;

第三行，我们显示白色半透明色块;

第四行，我们显示缺货字样（可以修改为无货）也可以。

如图：

第二步，我们来做CSS:

.picturenoqty{width: 160rpx ;height : 160rpx;}

.picturenoqty image{width: 100%;height : 100%: bondar raulus :6rpx;}

.picturenoqty .spannoqty{position: absolute; background: rgba(153, 153, 153, e.5);width: 160rpx ;haight :20px; left:0rpx; top: 80rpx;}

.picturenoqty .spannoqty .textnoqty{position: absolute; left:50rpx;color: . #fff; font- size:34rpx; top :3rpx}

第一行，我们定义了盒子的宽高，即图片外层

第二行，我们定义了图片的大小及圆角;

第三行，我们定义了色块底色及透明度等样式

第四行，我们定义了”缺货“字样的样式。

如图：

接着，我们把它套到程序里就实现了。

这里需要注意：

相关推荐