html文字浮在图片上小法式实现图片上显示文字半透明的后果浮动在图片上

在公司做的小程序，紧张是供应线上购物利用。
在购物车列表上，有这样一个场景，即当客人把衣服加购后一段韶光，该衣服可能库存紧缺或是下架了，这时，我们须要在购物车项中，见告客人该衣服已经下架，而不是让他下单结算时，才创造缺货。

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

如果通过自己对小程序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}

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

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

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

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

如图：

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

这里须要把稳：

我们通过两个View来实现显示，一个view来显示底色块，一个view显示缺货字样（这样比较灵巧）我们通过在样式的 rgba(153, 153, 153, e.5)，表示了透明度，position: absolute表示了绝对定位