首先看效果

思路：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. sublime text 3中配置golang开发环境

    1:首先下载 Go源码 https://golang.org/dl/  [根据不同的环境选择] 2:新建文件项目文件夹 存放  D:/Go_project 分别建立  bin  src  pkg  子 ...

  2. java---servlet与filter的联系与区别

    filter是一个可以复用的代码片段,可以用来转换HTTP请求.响应和头信息.Filter不像Servlet,它不能产生一个请求或者响应,它只是修改对某一资源的请求,或者修改从某一的响应. 最近使用插 ...

  3. php -- 魔术方法 之 对象输出 : __toString()

    对象输出:__toString() 当一个对象被当做字符串进行输出时(echo,print),会调用__toString()方法 <?php //输出对象 class Person{ //属性 ...

  4. 去死吧！USB转串口！！！

    首先,这个题目有两种歧义:1.USB转232串口(严格说就是这种)! 2.USB转USART串口(通常都是这么叫,认为就是这,理论上是错误的,歧义所在)! USB转TTL.USB转232.USB转串口 ...

  5. C语言若干知识点归记

    一.C语言指针学习架构 1.基本数据类型---指针 2.字符串---指针 3.数组---指针 4.函数---指针 5.结构体---指针 6.共用体---指针 7.枚举---指针 8.位域---指针 9 ...

  6. 表达式树在LINQ动态查询

    动态构建表达式树,最佳实践版,很实用! public class FilterCollection : Collection<IList<Filter>> { public F ...

  7. Python+selenium之简单介绍unittest单元测试框架

    Python+selenium之简单介绍unittest单元测试框架 一.unittest简单介绍 unittest支持测试自动化,共享测试用例中的初始化和关闭退出代码,在unittest中最小单元是 ...

  8. C语言while语句

    在C语言中,共有三大常用的程序结构: 顺序结构:代码从前往后执行,没有任何“拐弯抹角”: 选择结构:也叫分支结构,重点要掌握 if else.switch 以及条件运算符: 循环结构:重复执行同一段代 ...

  9. JSP内置对象——request 及其响应get和post请求的实例

    request对象客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例.request对象具有请求域,即完成客户端的 ...

  10. Django学习笔记第十篇--实战练习六--发送邮件

    一.发送邮件需要引入的包依赖文件(Django1.8 Python2.7) from django.core.mail import send_mail,send_mass_mail 其中send_m ...