首先看效果

思路：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. iis 导入和导出配置——iis管理

    首先我们打开服务器管理器,一般服务器都在左下角的任务栏中,直接点击即可打开 2 打开WEB服务器(IIS),选择IIS根目录,找到右边的共享管理 3 打开共享管理后,我们在右侧的操作中找到导出配置,选 ...

  2. 实践jQuery Easyui后本地化有感

    这个星期在忙着easyui的例子中的大部分功能的本地化.一开始给我的感觉就是把jquery easyui中的每个demo的代码粘贴复制一遍. 可是,真正在做的过程中,我才发现,我错了. 在仿写easy ...

  3. Spring Cloud的子项目，大致可分成两类

    Spring Cloud的子项目,大致可分成两类,一类是对现有成熟框架”Spring Boot化”的封装和抽象,也是数量最多的项目:第二类是开发了一部分分布式系统的基础设施的实现,如Spring Cl ...

  4. 【noip模拟题】挖掘机（模拟题+精度）

    这题直接模拟. 可是我挂在了最后两个点上QAQ.唯一注意的是注意精度啊...用来double后边转成整数就忘记用longlong...sad #include <cstdio> #incl ...

  5. 【Python】用文本打印树

    From:http://zhidao.baidu.com/link?url=O8U5TynGBMojDw2iFhlghPPf5_ZE1X8CAQMrK19pv-KxhvKCc6Z2yzsoQaukgN ...

  6. mathtype免费版下载及序列号获取地址

    在编辑公式这个方面来说,MathType是使用最多的一个工具,因为它操作简单,不需要复杂的学习过程就可以很快地掌握操作技巧,并且功能也比Office自带的公式编辑器完善很多,可以对公式进行批量修改.编 ...

  7. python_cookies

    1.将cookies保存到变量中,然后打印cookie中的值 #coding:utf-8 #将cookies保存到变量中,然后打印cookie中的值 import urllib2 import coo ...

  8. django头像上传详解

    使用form组件上传头像 实现的效果如下: 将默认的上传文件框隐藏起来变成了一个默认的头像 而且可以点击上传 处理步骤 avatar = forms.FileField( widget = widge ...

  9. 第四篇：new和delete的基本用法

    前言 new和delete是C++中用来动态管理内存分配的运算符,其用法较为灵活.如果你对它们的几种不同用法感到困惑,混淆,那么接着看下去吧. 功能一:动态管理单变量/对象空间 下面例子使用new为单 ...

  10. 自定义控件_StickyNavLaout

    关注我一.View结构原理1.extends linearLayout 继承想要用的布局,首先完成布局的填充在 onFinishInflate 方法中 findViewById(); @Overrid ...