div半透明

1.使用场景:

公司做的小程序主要提供网购。在购物车列表上,有一个场景是,客人多买了衣服之后,衣服可能会缺货或者下架一段时间。这时候我们需要告诉客人购物车物品里的衣服已经下架了,而不是让他下单结账,才发现衣服没货了。

所以我需要做一个功能,在购物车上显示缺货的款式。例如,像下面这样的界面:

div半透明

如果通过自己了解的小程序WXML和CSS以及网上的一些资料,最后达到了这样一个效果:

现在,让我们解释一下这个过程:

第一步,让我们做WXML:

& ltview class = ‘ picturenoqty ‘ & gt

& ltimage src = ‘ { { item . product info . image } } ‘ & gt;& lt/image & gt;

& ltview class=’spannoqty’&gt。

& ltview class = ‘ textnoqty ‘ & gt已脱销

& lt/view & gt;

& lt/view & gt;

其实我们可以把view想象成html中的一个div,这样可以更好的理解box的概念。

第一行我们定义了一个盒子,如果缺货就会显示出来(而不是正常的盒子);

在第二行,我们显示图片;

在第三行,我们显示一个白色半透明色块;

第四行,我们可以显示缺货(可以改成缺货)。

如图所示:

第二步,让我们做CSS:

。pictureno qty { width:160 rpx;身高:160rpx}

。picturenoqty图像{宽度:100%;身高:100%:bondar RAU lus:6 rpx;}

。picturenoqty。spanno qty { position:absolute;背景:rgba(153,153,153,e . 5);宽度:160rpx海特:20px左:0rpx顶配:80rpx}

。picturenoqty。spannoqty。text no qty { position:absolute;左:50rpx颜色:。# ffffont-size:34r px;top :3rpx}

在第一行中,我们定义了盒子的宽度和高度,这是图片的外层。

第二行,我们定义图片的大小和圆角;

在第三行中,我们定义色块背景色和透明度的样式。

第四行,我们定义了“缺货”的风格。

如图所示:

然后,我们把它放到程序中,它就实现了。

这里应该注意的是:

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论