background图片叠加_css在图片上叠加层(其他图标)

css在图片上叠加层(其他图标)2017-09-19 21:51

有时我们在网上购物的时候，经常会看到产品图片上面，会有“特价”、“国庆”等标签。

一般人可能会无所谓，但是对于我们这些做前端的，想法就不一样了。

会想这是如何做到的呢？css样式怎么写呢？

所以今天小编分享的就是，如何在图片上叠加层(其他图标)。 html代码

body{font-size:12px;}

div{width:366px;display:inline-block;border:1px #eaeaea solid;position:relative;}

div:hover{-webkit-box-shadow: 3px 3px 3px #ccc;-moz-box-shadow: 3px 3px 3px #ccc;box-shadow: 3px 3px 3px #ccc;}

div img{width:364px; height:252px; display:inline-block; margin:1px 1px;}

div .lab_tj{width:73px; height:73px; background:url(1505785832479235.png) no-repeat; display:inline-block;position:absolute; top:1px; right:1px;}

div .lab_tj{filter:alpha(opacity=25);opacity:0.25;}

div .tag{width:340px;margin:8px 0 0 8px; display:inline-block; position:absolute;top:0;left:0;}

div .tag em{padding:4px 6px; display:inline-block; background:#e5004f;border-radius:2px; font-style:normal;color:#fff; margin:4px 0 0 4px;}

   

国庆

亲自测试一下

如果你想某个标签有半透明的效果，还可以修改css，我们以右上角标签为例。

只需修改.lab_tj样式即可。

div .lab_tj{filter:alpha(opacity=25);opacity:0.25;}

在这个实例中，小编放了两个标签在图片上面，可根据自己的需求修改。