1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【html+css3】在一张jpg图片上 显示多张透明的png图片

【html+css3】在一张jpg图片上 显示多张透明的png图片

时间:2021-04-09 06:31:53

相关推荐

【html+css3】在一张jpg图片上 显示多张透明的png图片

1、需求:在一个div布局里面放置整张jpg图片,然后在jpg图片上显示三张水平展示的透明png图片,且png外层用a标签包含菜单

2、效果图:

3、上图,底层使用蓝色jpg图片,【首页】、【购物车】、【会员中心】三个图标都是透明的png黄色图片

4、上代码:html

<div style="height: 69px;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;background-repeat: no-repeat;background-position: center;background-size: 100%;background: url(http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_04.jpg);"><a href="{php echo $this->createMobileUrl('nightpay')}"><img src="http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_05.png" height="60px"></a><a href="{php echo $this->createMobileUrl('MycartNight')}"><img src="http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_07.png" height="60px"></a><a href="{php echo $this->createMobileUrl('User_center')}"><img src="http://weixin.***.com/addons/ewei_shopping/template/mobile/images/Q_09.png" height="60px"></a></div>

css:

a{color: #4f4f4f;text-decoration: none;display: block;flex: 1;width: 100%;height: 100%;text-align: center; }

5、记录一点,多学习一点,以后总会用到,自信从点滴开始。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。