有时我们要对已有的图片进行装饰,比如说加个标签或者打上促销标志等等。如果直接对图片处理,会比较麻烦。这里介绍一种使用CSS的超简单的办法。它是通过附加的<span>标签,实现图片的重叠效果。
原理:
把原图放在一个<div>里,然后在这个<div>里插入一个空<span>标签,然后在css样式里,给这个span加上背景图,这个背景图就是指原图的装饰。
CSS样式如下:注意在div(本例中class命名为grd )的样式里position被设成relative(相对); 而在span里position被设成absolute(绝对);这个非常重要!而其它样式比如:width(宽度),top(上间距) 都可以根据实际情况来定。
<style type="text/css">
.grd {
border:1px solid #CECECE;
padding:50px;
height:50px;
width:147px;
position:relative;
}
.grd span{
background: url(/images/hot.gif) no-repeat;
display: block;
position: absolute;
width: 35px;
height: 58px;
top: 5px;
left:140px;
border: 0px;
}
</style>
有了上面的CSS,HTML可以这样写:
<div class="grd">
<span></span>
<img src="/images/61dh.png" border="0"/>
</div>
分享到:
相关推荐
CSS两张图片叠加透明显示特效是一款使用 css blend-mode属性制作两张图片混合,一张背景图片和人物图片叠加透明显示效果。
非常实用的特效代码,可以完美运行,可以二次修改!
CSS3悬停卡片重叠翻转特效是一款两张卡片图片重叠,鼠标悬停时图片翻转360度切换动画特效。
其原理就是采用两张图片,一个模糊,一个清晰,用两个div叠加起来后 清晰的图片从完全透明变成全部显示出来,另外一个方向相反,默认加载时间为5秒 两者叠加起来就组成了这样一个动画过程,原理其实很简单 ...
jquery多张叠加图片上下切换代码.zip
纯CSS实现图片前后翻页效果
CSS3悬停卡片重叠翻转特效是一款两张卡片图片重叠,鼠标悬停时图片翻转360度切换动画特效。
在CSS里面,每个元素盒子都可以想象成由两个图层...而现在,我们可以为背景图层添加多张图片(以及 CSS3 渐变)。 CSS背景属性: background-color background-image background-repeat background-position b
公司业务需要需要做一个双X双Y的图形报表,之前研究过很多例子结合把双X轴不等分显示; 1、有曲线图、有柱状图 2、X轴分组合并显示 3、可自行修改显示数值和比例在一个图上
使用微信的js东特特效还是相对方便绑定了z-index,基本实现两张卡片的相互切换模仿微信小程序文档写了动画的效果,注意的就是translate移动之后,一定要再移动回0,这样才能在之后回到卡片初始位置卡片绑定了透明度...
<style type="text/css"> body,td,th { font-size: 20px; color: #F0F; font-style: italic; } body { background-image: url(Mypsd_13870_201102141734070002B.jpg); } .b1{border:5px solid blue} .b2{border:...