css圖片上懸浮文字（絲帶效果）實現

時間 2019-11-20

標籤 css 圖片懸浮文字絲帶效果實現欄目 CSS 简体版

原文原文鏈接

首先看效果css

思路：一、去掉「絲帶「菱角使用的是overflow: hidden;html

二、經過z-index下降圖片的優先級或者調高「絲帶」優先級來實現覆蓋效果（z-index須要寫在有position的元素上面，而且後面的元素默認優先級比前面高）web

三、父級元素使用position:relative，子級元素使用position:absolute，進行定位。瀏覽器

四、經過transform來旋轉「絲帶」spa

代碼：code

<!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起做用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。