首先看效果

思路：1、去掉“丝带“菱角使用的是overflow: hidden;

2、通过z-index降低图片的优先级或者调高“丝带”优先级来实现覆盖效果（z-index需要写在有position的元素上面，并且后面的元素默认优先级比前面高）

3、父级元素使用position:relative，子级元素使用position:absolute，进行定位。

4、通过transform来旋转“丝带”

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style type="text/css">

.sidai{

  display: inline-block;

  text-align: center;

  width: 200px;

  height: 20px;

  position: absolute;

  top: 200px;

  left: 60px;

  transform: rotate(315deg);

  -ms-transform: rotate(315deg);

  -moz-transform: rotate(315deg);

  -webkit-transform: rotate(315deg);

  -o-transform: rotate(315deg);

  border: 1px dashed;

 background: #57DD43;

}

</style>

<body>

<div style='text-overflow:ellipsis; white-space:nowrap;position:relative;width:200px;overflow: hidden;'>

<img style="width:100%;

  height: 100%;"  src="123.jpg"/><span class="sidai">丝带效果</span>

</div>

</body>

</html>
  transform: rotate(315deg);

  -ms-transform: rotate(315deg);

  -moz-transform: rotate(315deg);

  -webkit-transform: rotate(315deg);

  -o-transform: rotate(315deg);
是为了适应不同浏览器的旋转效果。默认以中心为轴，顺时针旋转。
text-overflow:ellipsis; white-space:nowrap
是为了让overflow:hidden起作用。

css图片上悬浮文字（丝带效果）实现的更多相关文章

  1. css图片上加文字

    第一种方法: 添加一个DIV,采用绝对定位,图片所属DIV为基准 <div style="position:relative;width:100px;height:100px;&quo ...

  2. 使用Qpaint在图片上写文字

    开发过程中需要实现在图片上叠加文字,可以采用Qpaint在图片上写文字,然后将图片显示在上面.再将Qlabel加到Qwidget中.效果如下 //创建对象,加载图片 QPixmap pix; pix. ...

  3. Office WORD如何在图片上添加文字

    如图所示,在图片格式中选择图片衬于文字下方即可,这样看起来感觉就像在图片上直接加字一样,没有生硬的感觉. 最终效果: Word如何在图片上添加文字Word如何在图片上添加文字Word如何在图片上添加文 ...

  4. 图像处理---《在图片上打印文字 FreeType库》

    图像处理---<在图片上打印文字 FreeType库> 目的:想在处理之后的图像上打印输出结果.方法: (1)只在图像上打印 数字.字母的话:                1.Mat格式 ...

  5. python如何在图片上添加文字（中文和英文）

    Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...

  6. C#图像处理（1）：在图片上加文字和改变文字的方向

    C#在图片上加文字,代码如下: /// <summary> /// 图片上方加文字,文字将会被180度反转 /// </summary> /// <param name= ...

  7. C#实现图片叠加，图片上嵌入文字，文字生成图片的方法

    /// <summary>     /// 图片叠加     /// </summary>     /// <param name="sender"& ...

  8. python 图片上添加文字

    import PIL from PIL import ImageFont from PIL import Image from PIL import ImageDraw #设置字体,如果没有,也可以不 ...

  9. 函数putText（）在图片上写文字

    #include <iostream> #include <opencv2/opencv.hpp> using namespace std; using namespace c ...

随机推荐

  1. 数据库 Oracle数据库对象二

    视图 --视图是对表逻辑抽象 --视图的好处:简化查询 --视图是一种虚表 --视图建立在已有表的基础上,视图赖以建立的这些吧称为基表. --向视图提供数据内容的语句为select语句,可以将视图理解 ...

  2. JobTracker作业启动过程分析

    转自:http://blog.csdn.net/androidlushangderen/article/details/41356521 在Hadoop中,启动作业运行的方式有很多,可以用命令行格式把 ...

  3. 【BZOJ】1029: [JSOI2007]建筑抢修（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1029 按右端点排序后依次加入,并且每一次看是否能被修筑,如果能就修:否则查找原来修过的,如果原来修过 ...

  4. RAID的简单说明

    RAID,为 Redundant Arrays of Independent Disks 的简称,中文为廉价※冗余磁盘阵列 . 磁盘阵列 其实也分为软阵列 (Software Raid) 和硬阵列 ( ...

  5. ubuntu16.04 安装 eclipse

    1. 下载jdk , jdk-8u77-Linux-x64.tar.gz 2.下载 eclipse  , eclipse-jee-mars-2-linux-gtk-x86_64.tar.gz 注:我下 ...

  6. 修改Android 界面颜色

    btnGetCode.setTextColor(getResources().getColor(R.color.dark_white)); Color.parseColor("#1a71d4 ...

  7. SQL语句：语法错误（操作符丢失）在查询表达式中

    所谓操作符丢失,应该是你在拼接SQL语句是少了关键词或者分隔符,导致系统无法识别SQL语句.建议:1.监控SQL语句,看看哪里出现问题:断点看下最后的sql到底是什么样子就知道了,另外你可以把这段sq ...

  8. Struts2_day04--自定义拦截器_Struts2的标签库_表单标签

    自定义拦截器 1 在struts2里面有很多的拦截器,这些拦截器是struts2封装的功能,但是在实际开发中,struts2里面的拦截器中可能没有要使用的功能,这个时候需要自己写拦截器实现功能 2 拦 ...

  9. ViewPageIndicator

    关于我的总结 1.写一个类extend HorizontalScrollView 实现ViewPagerIndicator,这样写index需要自己写有点啰嗦 2.自定义一个类extends Hori ...

  10. C++编译遇到参数错误（cannot convert parameter * from 'const char [**]' to 'LPCWSTR'）

    转:http://blog.sina.com.cn/s/blog_9ffcd5dc01014nw9.html 前面的几天一直都在复习着被实习落下的C++基础知识.今天在复习着上次创建的窗口程序时,出现 ...