css图片上悬浮文字(丝带效果)实现
2024-08-25 08:09:52
首先看效果
思路: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起作用。
最新文章
- 《Breakfast At Tiffanys》
- java必看书籍
- ADO.net 防止SQL 字符串注入攻击
- DW(二):SqlServer PDW
- c# winfrom应用程序关闭任务管理器中的进程
- linux下proc目录详解
- C/C++使用Lu脚本协程
- 数据查找之80-20原则的JavaScript代码实现
- Android WebView选择本地文件上传
- js对象工厂函数与构造函数
- bootstrap timepicker 在angular中取值赋值 并转化为时间戳
- mysql5.6基于主从复制的mmm高可用架构详解
- [Python]mysql-python 安装错误 fatal error C1083: Cannot open include file: &#39;config-win.h&#39;: No such file or directory
- Python基础入门教程(3)
- 安装apache 后,找不到服务,解决办法
- java enum的一种写法记录
- Docker学习笔记之docker volume 容器卷的那些事(一)
- apache jmeter 压力测试
- Struts2框架之Action类的访问
- MySQL大数据量分页性能优化
热门文章
- 10个网页设计师必备的CSS技巧(转)
- 【BZOJ】1645: [Usaco2007 Open]City Horizon 城市地平线(线段树+特殊的技巧)
- LPCTSTR —— 摘自百度百科
- hdu 1358:Period(KMP算法,next[]数组的使用)
- unity发射弓箭轨迹的实现
- Python爬虫(七)
- 剑指 offer set 25 求 1+2+...+n
- Zabbix-3.0.0 安装Graphtree
- hammer.js移动端手势库
- 分布式项目中 linux 服务器 部署jar 应用脚本 deploy.sh