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;}

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

background图片叠加_css在图片上叠加层(其他图标)相关推荐

background图片叠加_CSS 背景图片重叠铺满整个层
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...
ps图片导svg，并上传到阿里图标库
设计画的图标,之前一直用的Inksacpe转的svg,并上传到阿里图标库,但是在删除背景时,图片极其容易虚化变形. 最近发现ps导出的svg,也可以上传到阿里,最关键的一步是先把图片"形状化 ...
background图片叠加_java实现图片的叠加效果
实现效果图这个效果的实现思路是: 1.先准备一张背景图,像素自己去定.像素越高最后生成的图片会更清晰,当然图片也会越大,注意这个背景图一定要是png格式的,要放用户头像的位置要镂空,透明的. 至于为 ...
Qt 视频上叠加透明图片
Qt 视频上叠加透明图片最近公司需要一个上位机软件,主要是全屏显示视频,在视频上面叠加透明图片. 调试了很多种方法,效果都不如意,主要是因为Qt 窗口背景不能被覆盖,透明背景,又不能播放视频. 我调 ...
Android图片特效处理之图片叠加
这篇将讲到图片特效处理的图片叠加效果.跟前面一样是对像素点进行处理,可参照前面的android图像处理系列之七--图片涂鸦,水印-图片叠加和android图像处理系列之六--给图片添加边框(下)-图片 ...
c语言图像透明度混合,用像素叠加轻松实现图片的半透明混合
用像素叠加轻松实现图片的半透明混合分类:计算机等级 | 更新时间:2016-07-07| 来源:转载半透明的混合效果经常在游戏里看到,效果那叫一个好.有天好奇心起,想琢磨一下这种效果是怎么实现的. ...
怎么在视频上叠加字幕和Logo--技术实现2
上一篇博文介绍了渲染时叠加字幕的技术实现方法,而这一篇给大家讲解怎么用修改视频像素的方法叠加字幕和Logo.下面我把叠加字幕和Logo都统称为叠加OSD. 图像有分YUV和RGB格式,每个像素都有一个 ...
Python+Opencv:在视频上叠加一个背景透明Logo
前言:看电视节目时,电视台都会把打在视频上,大多数视频Logo背景都是固定不便的,但有些做得好的效果是,Logo背后的视频是随节目内容实时变化的.这到底怎么实现的呢? 经过实践,我也搞了一个Logo背 ...
理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用ba ...

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

background图片叠加_css在图片上叠加层(其他图标)相关推荐

最新文章

热门文章