文章目录

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

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

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

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

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

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

html代码<style>
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;}
</style>
<div>
    <img src="1505785832423874.jpg">
    <span class="tag">
    	<em>国庆</em>
    </span>
    <em class="lab_tj"></em>
</div>
亲自测试一下

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

只需修改.lab_tj样式即可。

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

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

本文网址:http://www.santii.com/article/67.html


数据更新时间:2018-09-22