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

 时间:2024-10-11 19:40:19

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

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

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

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

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

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

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

  • 如何安装Symantec官方网站Norton诺顿杀毒软件
  • 项目导入myeclipse报错解决办法
  • jsp页面如何查看列表列表
  • NetBeansIDE如何直接使用外部浏览器运行web项目
  • IDEA中怎么设置渲染文档注释
  • 热门搜索
    控制面板在哪里打开 旅游观光车价格 如何去斑 嵩山少林寺在哪里 单眼皮如何变双 如何发朋友圈 我好像在哪里见过你 合肥师范学院怎么样 资生堂化妆品怎么样 国外旅游景点图片