css两张图片重叠显示

 时间:2024-10-14 17:16:06

1、移动端开发中,部分产品会显示一个已售罄。这其实是两张图片叠加在一起产生的效果。

css两张图片重叠显示

2、在后端传值的时候,会有一个值表示库存。库存大于0的时候,图片会正常显示,当库存等于0的时候,则显示一个已售罄。就需要使用v-if来对这两种情况进行判断。

css两张图片重叠显示css两张图片重叠显示

3、叠加的效果是需要在图片的最外层组件中加一个相对定位:position: relative;给需要叠加的图片加一个绝对定位:position: absolute;然后让需要叠加的图片top值为0,left值也为0,就可以让两张照片完全重叠了。

css两张图片重叠显示

4、主图为被叠加的图片,已售罄为要叠加的图片。最后,记得给被叠加的图片加一个透明度,即opacity: 0.5;

  • 实现整个html居中最简单方法
  • 怎么让div居中
  • HTML怎么实现网页跳转
  • 网页设计HTML中如何插入背景图片
  • HTML怎样链接css
  • 热门搜索
    天麻怎么吃效果最好 飞机怎么折飞得远 怎么开罐头 平均分怎么算 漱口水怎么用 身份证掉了怎么办 孕妇鼻炎犯了怎么办 违停怎么处罚 抖音怎么拍 怀孕了怎么办