多语言展示
当前在线:1645今日阅读:23今日分享:25

CSS+HTML实现图片角标或者效果

制作网页页面时,经常会用到带角标的图片,而角标的内容是需要动态调整的,实现的原理就是把角标图片浮动到展示图片上方,这里开始给大家讲解如何实现这样的效果。
工具/原料
1

电脑

2

代码编辑器,这里用的是sublime

方法/步骤
1

1.用编辑器编写一个简单的test.html文件,一个div里加上两张图片,编辑完毕,打开页面,查看效果.

2

2.给对应的几个标签加上对应的class属性,编写好对应的css样式,这里给父标签设置了宽高,把第二张图片作为角标背景图,并加入文字。此时各标签的class属性为:父标签:box图片:image角标:image2完成后点开看看效果

3

3.父标签样式中加上相对定位属性position: relative;角标样式中加上绝对定位属性position: absolute;并设置好想要的边距top:10px;right:0px;完成后打开页面查看效果,到此讲解完毕,希望给大家带来帮助。

4

4.最后奉上相关的CSS代码,有需要的朋友们可以试试。.box{ width: 250px; height: 250px; position: relative; } .box > .image{ width: 100%; height: auto; } .box > .image2{ width: 93px; font-size: 12px height: 33px; background:url('images/house_label_yellow@3x.png') no-repeat; background-size: 100% 100%;background-position: center; text-align: center; line-height: 33px; color: #FFF; position: absolute; top:10px; right:0px; }

注意事项
1

本实例只是简单的做效果实现演示,并没有测试各浏览器兼容性

2

父标签要要加上相对定位属性,不然就会飘到按body标签计算的边距位置

推荐信息