首先看效果

思路：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. C++ 引用做左值

    //引用做左值 #include<iostream> using namespace std; int SetA(int *p){ *p = ; return *p; } int& ...

  2. 115个Java面试题和答案（上）

    转自:http://www.importnew.com/10980.html 本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的 ...

  3. 第二百六十五节，xss脚本攻击介绍

    xss脚本攻击介绍 Cross-Site Scripting(XSS)是一类出现在 web 应用程序上的安全弱点,攻击者可以通过 XSS 插入一 些代码,使得访问页面的其他用户都可以看到,XSS 通常 ...

  4. 【NOIP模拟题】小象涂色（概率+期望+递推）

    表示数学是个渣... 其实只需要推出每个箱子k次以后的颜色为i的概率就能算出期望了.. 对于区间[l, r]的箱子因为是任意颜色且任意取,所以概率分别为1/c和1/2,那么整体概率就为这两个的乘积.根 ...

  5. odoo 在原有工作流中添加审批流

    odoo 在原有工作流中添加审批流 步骤: 1.加入所需的工作流节点以及相连的线(即所添加的审批流),代码如下: <?xml version="1.0" encoding=& ...

  6. 如何在ChemDraw中缩短双键长度

    双键是化学绘图软件ChemDraw在绘制化学图形的过程中会遇到各种各样的化学结构.而双键就是一种常见的化学基础结构,有的用户希望自己绘制的图形更加的美观,希望可以调整双键的长度并且不影响到其他的结构. ...

  7. VC++ 监视文件（夹）

    参考:http://www.cnblogs.com/fangkm/archive/2009/03/31/1426526.html WinFileSystemMonitor.h  C++ Code  1 ...

  8. Effective C++ Item 10,11 Have assignment operators return a reference to *this Handle assignment to self in operator =

    If you want to concatenate assignment like this int x, y, z; x = y = z = 15; The convention is to ma ...

  9. Firefox 新增容器标签：可同时登录多个用户

    Mozilla昨天在Firefox夜间构建版50.0a1中增加了一个名为“容器标签Container Tabs”的实验性功能. Mozilla的工程师称,该功能可以将用户的浏览会话分到不同的容器中.这 ...

  10. PE导入表分析

    A.dll 导入 B.dll 导出函数 A.dll 表内容 这个结构指向的B导出函数的地址 Hook这个位置 等同于 Hook B.dll导出函数