css图片上悬浮文字（丝带效果）实现

首先看效果

思路：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起作用。
posted @ 2017-08-10 22:06  leftcity  阅读(8744)  评论(0)  编辑  收藏  举报