首先看效果

思路：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. 01 awk工具的使用

    一:登录mysql后查看mysql的连接状态:show status ; 回车 如图所示: |Threads_connected    | 1| Threads_running       | 1   ...

  2. [浪风分享] PHP开发必看 我现在是这样编程的

    我在做什么 曾经,我试过接到一些需求.一眼带过后,脑袋马上随着高昂的斗志沉溺在代码的世界中 ,马不停蹄地敲着键盘直到最后测试的完成.我从思绪中恢复过来,乍一看自己写的功能,和需求差了十万八千里,我TM ...

  3. linux -- ubuntuserver 安装图形界面

    安装Gnome桌面 1.安装全部桌面环境,其实Ubuntu系列桌面实际上有几种桌面应用程序,包括Ubuntu-desktop.Kubunut-desktop和Xubuntu- desktop. 我们就 ...

  4. 【BZOJ】1634: [Usaco2007 Jan]Protecting the Flowers 护花（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1634 贪心.. 我们发现,两个相邻的牛(a和b)哪个先走对其它的牛无影响,但是可以通过 a的破坏花× ...

  5. 【Debian】时间设置

    http://blog.linuxphp.org/archives/567/ http://www.dedecms.com/knowledge/servers/linux-bsd/2012/0819/ ...

  6. C#中Uri类的解释

    URI,是uniform resource identifier,统一资源标识符,用来唯一的标识一个资源.而URL是uniform resource locator,统一资源定位器,它是一种具体的UR ...

  7. 用原生Canvas写贪吃蛇及问题解决

    为了学习Canvas,写了这个小游戏贪吃蛇供自己和大家学习 Github: https://github.com/zhiyishou/Gsnake Play On: http://zhiyishou. ...

  8. AWS CLI 【S3】

    1.创建一个桶&删除一个桶 root@syavingc:~# aws s3 mb s3://syavingc #创建一个桶 make_bucket: syavingc root@syaving ...

  9. 部署mysql后，无法设置用户远程登陆（%只所有用户，不可以，只能给指定的ip？）

    MySQL允许远程访问的设置 1.注释bind-address = 127.0.0.1. 代码如下: >sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 将 ...

  10. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...